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.

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?

Answer 1

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.

Answer 2

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