I have a simple form with phone inputs and some email inputs, however I cannot get rid of the default browser warning messages that e 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='' autoplete='off' maxlength='20' /></li>";

How would you handle this problem?

I have a simple form with phone inputs and some email inputs, however I cannot get rid of the default browser warning messages that e 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='' autoplete='off' maxlength='20' /></li>";

How would you handle this problem?

• javascript
• jquery
• validation
• input
• preventdefault

• 3 Did you try removing the pattern attribute? Just using the tel type should still get you the keypad interface on mobile. – prodigitalson Commented Aug 1, 2013 at 14:48
• Ah whoa I think that was it! Triple checking – Leon Gaban Commented Aug 1, 2013 at 14:49
• That was it :) do you want to go ahead and post the answer? Thanks again! var mobilephone = $("<li><label>Mobile Phone:</label></li><li><input type='tel' class='added_mobilephone' name='mobilephone' maxlength='20' /></li>"); – Leon Gaban Commented Aug 1, 2013 at 14:52
• Added my ment as an answer. – prodigitalson Commented Aug 1, 2013 at 14:56

2 Answers 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/TR/html5/forms.html#attr-fs-novalidate

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.