HTML5 form required attribute Set custom validation message

Question

I ve got the following HTML5 form  http   jsfiddle net nfgfP    x000D   x000D   lt form id  form  onsubmit  return login     gt  x000D   lt input name  username  placeholder  Username  required   gt  x000D   lt input name  pass   type  password  placeholder  Password  required  gt  x000D   lt br  gt Remember me   lt input type  checkbox  name  remember  value  true    gt  lt br  gt  x000D   lt input type  submit  name  submit  value  Log In   gt  x000D   x000D   x000D    Currently when I hit enter when they re both blank  a popup box appears saying  Please fill out this field   How would I change that default message to  This field cannot be left blank    EDIT  Also note that the type password field s error message is simply        To recreate this give the username a value and hit submit   EDIT  I m using Chrome 10 for testing  Please do the same

User · Answer

The solution for preventing Google Chrome error messages on input each symbol:

_x000D_

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>_x000D_
<form method="post" action="#">_x000D_
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>_x000D_
  <input id="test_number_1" type="number" min="0" required="true"_x000D_
         oninput="this.setCustomValidity('')"_x000D_
         oninvalid="this.setCustomValidity('This is my custom message.')"/>_x000D_
  <input type="submit"/>_x000D_
</form>_x000D_
_x000D_
<form method="post" action="#">_x000D_
  <p></p>_x000D_
  <label for="text_number_1">Here you will see no error messages on input:</label><br>_x000D_
  <input id="test_number_2" type="number" min="0" required="true"_x000D_
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"_x000D_
         oninvalid="this.setCustomValidity('This is my custom message.')"/>_x000D_
  <input type="submit"/>_x000D_
</form>

_x000D_

User · Answer

Note  This no longer works in Chrome  not tested in other browsers   See edits below   This answer is being left here for historical reference   If you feel that the validation string really should not be set by code  you can set you input element s title attribute to read  This field cannot be left blank    Works in Chrome 10   title  This field should not be left blank     See http   jsfiddle net kaleb nfgfP 8   And in Firefox  you can add this attribute   x-moz-errormessage  This field should not be left blank     Edit  This seems to have changed since I originally wrote this answer   Now adding a title does not change the validity message  it just adds an addendum to the message   The fiddle above still applies   Edit 2  Chrome now does nothing with the title attribute as of Chrome 51  I am not sure in which version this changed

User · Answer

I have made a small library to ease changing and translating the error messages  You can even change the texts by error type which is currently not available using title in Chrome or x-moz-errormessage in Firefox  Go check it out on GitHub  and give feedback   It s used like    lt input type  email  required data-errormessage-value-missing  Please input something  gt    There s a demo available at jsFiddle

User · Answer

The easiest and cleanest way I ve found is to use a data attribute to store your custom error  Test the node for validity and handle the error by using some custom html    le javascript  if node validity patternMismatch                        message   node dataset patternError              and some super HTML5   lt input type  text  id  city  name  city  data-pattern-error  Please use only letters for your city   pattern   A-z      required gt

User · Answer

By setting and unsetting the setCustomValidity in the right time  the validation message will work flawlessly    lt input name  Username  required  oninvalid  this setCustomValidity  Username cannot be empty      onchange  this setCustomValidity      type  text    gt    I used onchange instead of oninput which is more general and occurs when the value is changed in any condition even through JavaScript

User · Answer

Here is the code to handle custom error message in HTML5   lt input type  quot text quot  id  quot username quot  required placeholder  quot Enter Name quot    oninvalid  quot this setCustomValidity  Enter User Name Here   quot    oninput  quot this setCustomValidity     quot   gt   This part is important because it hides the error message when the user inputs new data  oninput  quot this setCustomValidity     quot

User · Answer

Okay  oninvalid works well but it shows error even if user entered valid data  So I have used below to tackle it  hope it will work for you as well   oninvalid  this setCustomValidity  Your custom message     onkeyup  setCustomValidity

User · Answer

It s very simple to control custom messages with the help of the HTML5 oninvalid event  Here is the code   User ID   lt input id  UserID   type  text  required         oninvalid  this setCustomValidity  User ID is a must    gt

User · Answer

I have a simpler vanilla js only solution   For checkboxes   document getElementById  id   oninvalid   function          this setCustomValidity this checked         My message         For inputs   document getElementById  id   oninvalid   function          this setCustomValidity this value         My message

User · Answer

Try this one  its better and tested   HTML    lt form id  myform  gt       lt input id  email              oninvalid  InvalidMsg this                oninput  InvalidMsg this               name  email               type  email              required  required    gt       lt input type  submit    gt   lt  form gt    JAVASCRIPT   function InvalidMsg textbox        if  textbox value                   textbox setCustomValidity  Required email address          else if  textbox validity typeMismatch           textbox setCustomValidity  please enter a valid email address          else          textbox setCustomValidity                 return true      Demo   http   jsfiddle net patelriki13 Sqq8e

User · Answer

Use setCustomValidity  document addEventListener  quot DOMContentLoaded quot   function         var elements   document getElementsByTagName  quot INPUT quot        for  var i   0  i  lt  elements length  i              elements i  oninvalid   function e                e target setCustomValidity  quot  quot                if   e target validity valid                    e target setCustomValidity  quot This field cannot be left blank quot                                     elements i  oninput   function e                e target setCustomValidity  quot  quot                         I changed to vanilla JavaScript from Mootools as suggested by  itpastorn in the comments  but you should be able to work out the Mootools equivalent if necessary  Edit I ve updated the code here as setCustomValidity works slightly differently to what I understood when I originally answered   If setCustomValidity is set to anything other than the empty string it will cause the field to be considered invalid  therefore you must clear it before testing validity  you can t just set it and forget  Further edit As pointed out in  thomasvdb s comment below  you need to clear the custom validity in some event outside of invalid otherwise there may be an extra pass through the oninvalid handler to clear it

User · Answer

Can be easily handled by just putting  title  with the field    lt input type  text  id  username  required title  This field can not be empty     gt

User · Answer

It s very simple to control custom messages with the help of HTML5 event oninvalid  Here is code     lt input id  UserID   type  text  required  required         oninvalid  this setCustomValidity  Witinnovation           onvalid  this setCustomValidity      gt    This is most important   onvalid  this setCustomValidity

User · Answer

Adapting Salar s answer to JSX and React  I noticed that React Select doesn t behave just like an  lt input  gt  field regarding validation  Apparently  several workarounds are needed to show only the custom message and to keep it from showing at inconvenient times   I ve raised an issue here  if it helps anything  Here is a CodeSandbox with a working example  and the most important code there is reproduced here      Hello js   import React    Component   from  react   import SelectValid from    SelectValid    export default class Hello extends Component     render         return          lt form gt           lt SelectValid placeholder  this one is optional    gt           lt SelectValid placeholder  this one is required  required   gt           lt input           required           defaultValue  foo            onChange  e   gt  e target setCustomValidity                onInvalid  e   gt  e target setCustomValidity  foo              gt           lt button gt button lt  button gt         lt  form gt                    SelectValid js   import React    Component   from  react   import Select from  react-select   import  react-select dist react-select css    export default class SelectValid extends Component     render         this required    this props required         false         this state  amp  amp  this state value   false   true      let inputProps   undefined      let onInputChange   undefined      if  this props required          inputProps             onInvalid  e   gt  e target setCustomValidity this required    foo                       onInputChange   value   gt            this selectComponent input input setCustomValidity            value                                this required                  foo                  this selectComponent props value         foo                     return value                     return          lt Select         onChange  value   gt              this required    this props required   false   value   false   true            let state   this  amp  amp  this state   this state     value  null              state value   value            this setState state             if  this props onChange                this props onChange                                   value  this  amp  amp  this state   this state value   null          options     label   yes   value  1      label   no   value  0             placeholder  this props placeholder          required  this required          clearable         searchable         inputProps  inputProps          ref  input   gt   this selectComponent   input           onInputChange  onInputChange          gt

[javascript] HTML5 form required attribute. Set custom validation message?

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to validation