Disable validation of HTML5 form elements

Question

In my forms  I d like to use the new HTML5 form types  for example  lt input type  url    gt   more info about the types here    The problem is that Chrome wants to be super helpful and validate these elements for me  except that it sucks at it  If it fails the built-in validation  there s no message or indication other than the element getting focus  I prefill URL elements with  http      and so my own custom validation just treats those values as empty strings  however Chrome rejects that  If I could change its validation rules  that would work too   I know I could just revert back to using type  text  but I want the nice enhancements using these new types offers  eg  it automatically switches to a custom keyboard layout on mobile devices      So  is there a way to switch off or customise the automatic validation

User · Accepted Answer

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

<form method="post" action="/foo" novalidate>...</form>

See https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

User · Answer

I had a read of the spec and did some testing in Chrome  and if you catch the  invalid  event and return false that seems to allow form submission   I am using jquery  with this HTML    x000D   x000D     suppress  invalid  events on URL inputs x000D     input type  url     bind  invalid   function     x000D    alert  invalid    x000D    return false  x000D      x000D   x000D  document forms 0  onsubmit   function      x000D    alert  form submitted    x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form gt  x000D     lt input type  url  value  http       gt  x000D     lt button type  submit  gt Submit lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    I haven t tested this in any other browsers

User · Answer

The best solution is to use a text input and add the attribute inputmode  url  to provide the URL keyboard facilities  The HTML5 specification was thought for this purpose  If you keep type  url  you get the syntax validation which is not useful in every case  it is better to check if it returns a 404 error instead of the syntax which is quite permissive and is not of a great help    You also have the possibility to override the default pattern with the attribute pattern  https        for example to be more permissive    Putting the novalidate attribute to the form is not the right answer to the asked question because it removes validation for all the fields in the form and you may want to keep validation for email fields for example   Using jQuery to disable validation is also a bad solution because it should absolutely work without JavaScript    In my case  I put a select element with 2 options  http    or https     before the URL input because I just need websites  and no ftp    or other things   This way I avoid typing this weird prefix  the biggest regret of Tim Berners-Lee and maybe the main source of URL syntax errors  and I use a simple text input with inputmode  url  with placeholders  without HTTP   I use jQuery and server side script to validate the real existence of the web site  no 404  and to remove the HTTP prefix if inserted  I avoid to use a pattern like pattern      http       to prevent putting the prefix because I think it is better to be more permissive

User · Answer

Instead of trying to do an end run around the browser s validation  you could put the http    in as placeholder text  This is from the very page you linked      Placeholder Text      The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field  Placeholder text is displayed inside the input field as long as the field is empty and not focused  As soon as you click on  or tab to  the input field  the placeholder text disappears       You   ve probably seen placeholder text before  For example  Mozilla Firefox 3 5 now includes placeholder text in the location bar that reads    Search Bookmarks and History                When you click on  or tab to  the location bar  the placeholder text disappears             Ironically  Firefox 3 5 does not support adding placeholder text to your own web forms  C   est la vie       Placeholder Support  IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID      3 7     4 0     4 0                                Here   s how you can include placeholder text in your own web forms    lt form gt     lt input name  q  placeholder  Search Bookmarks and History  gt     lt input type  submit  value  Search  gt   lt  form gt        Browsers that don   t support the placeholder attribute will simply ignore it  No harm  no foul  See whether your browser supports placeholder text    It wouldn t be exactly the same since it wouldn t provide that  starting point  for the user  but it s halfway there at least

User · Answer

you can add some javascript to surpress those obnoxious validation bubbles and add your own validators   document addEventListener  invalid    function        return function e            prevent the browser from showing default error bubble   hint       e preventDefault             optionally fire off some custom validation handler          myValidation                 true

User · Answer

I just wanted to add that using the novalidate attribute in your form will only prevent the browser from sending the form  The browser still evaluates the data and adds the  valid and  invalid pseudo classes    I found this out because the valid and invalid pseudo classes are part of the HTML5 boilerplate stylesheet which I have been using  I just removed the entries in the CSS file that related to the pseudo classes  If anyone finds another solution please let me know

User · Answer

Just use novalidate in your form    lt form name  myForm  role  form  novalidate class  form-horizontal  ng-hide  formMain  gt    Cheers

User · Answer

If you mark a form element as required    then novalidate    does not help   A way to circumvent the required validation is to disable the element

User · Answer

Here is the function I use to prevent chrome and opera from showing the invalid input dialog even when using novalidate   window submittingForm   false     input novalidate    bind  invalid   function e        if  window submittingForm           window submittingForm   true            e target form  submit            setTimeout function   window submittingForm   false    100             e preventDefault        return false

User · Answer

I found a solution for Chrome with CSS this following selector without bypassing the native verification form which could be very useful   form input  -webkit-validation-bubble-message   form select  -webkit-validation-bubble-message  form textarea  -webkit-validation-bubble-message       display none       By this way  you can also customise your message     I got the solution on this page   http   trac webkit org wiki Styling 20Form 20Controls

[validation] Disable validation of HTML5 form elements

Examples related to validation

Examples related to forms

Examples related to html

Examples related to input