How to prevent the default browser input validation?

Question

I have a simple form with phone inputs and some email inputs, however I cannot get rid of the default browser warning messages that come up when I click the submit button.

enter image description here

My CodePen

I've tried to implement event.preventDefault(); however it doesn't seem to work in my case.

$('#profile-info-form').unbind('submit').bind("submit", function(event) {
    event.preventDefault();
    console.log('save button clicked');
});

Example of the input fields I create on the fly:

var myphone = "<li><label>Cell Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /></li>";

How would you handle this problem?

Did you try removing the `pattern` attribute? Just using the `tel` type should still get you the keypad interface on mobile. — prodigitalson, Aug 01 '13 at 14:48
That was it :) do you want to go ahead and post the answer? Thanks again! var mobilephone = $("

score 11 · Answer 1 · answered Aug 01 '13 at 15:21

If you want to disable client side validation for a form add a novalidate attribute to the form element. Fx:

<form method="post" action="" id="profile-info-form" novalidate>

 // Your script Here

 </form>

See http://www.w3.org/TR/html5/forms.html#attr-fs-novalidate

score 4 · Accepted Answer · answered Aug 01 '13 at 14:56

4

Remove the pattern attribute? Just using the tel type should still get you the keypad interface on mobile and without pattern the native validation/formatting should not run.

answered Aug 01 '13 at 14:56

prodigitalson

60,050
10
100
114

This works in this particular situation, however if there is a regular input for text that is marked as `required` you will receive a warning that it must not be blank. – CWSites Mar 24 '21 at 19:44

How to prevent the default browser input validation?

2 Answers2