title: How to prevent the default browser input validation?
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/ZE8qs.png" alt="enter image description here"></p>
  
  <p><a href="http://codepen.io/leongaban/pen/HKGiw" rel="nofollow noreferrer"><strong>My CodePen</strong></a></p>
  
  <p>I've tried to implement <a href="https://stackoverflow.com/questions/13056697/chrome-please-match-the-requested-format-validation-message">event.preventDefault();</a> however it doesn't seem to work in my case.</p>
  
  <pre><code>$('#profile-info-form').unbind('submit').bind("submit", function(event) {
      event.preventDefault();
      console.log('save button clicked');
  });
  </code></pre>
  
  <p>Example of the input fields I create on the fly:</p>
  
  <pre><code>var myphone = "&lt;li&gt;&lt;label&gt;Cell Phone:&lt;/label&gt;&lt;/li&gt;&lt;li&gt;&lt;input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /&gt;&lt;/li&gt;";
  </code></pre>
  
  <p><br/>
  How would you handle this problem?</p>