Set custom HTML5 required field validation message

Question

Required field custom validation  I have one form with many input fields  I have put html5 validations   lt input type  text  name  topicName  id  topicName  required   gt    when I submit the form without filling this textbox it shows default message like   Please fill out this field   Can anyone please help me to edit this message   I have a javascript code to edit it  but it s not working    document  ready function         var elements   document getElementsByName  topicName        for  var i   0  i  lt  elements length  i              elements i  oninvalid   function e                e target setCustomValidity                  if   e target validity valid                    e target setCustomValidity  Please enter Room Topic Title                                     elements i  oninput   function e                e target setCustomValidity                              Email custom validations  I have following HTML form   lt form id  myform  gt       lt input id  email  name  email  type  email    gt       lt input type  submit    gt   lt  form gt    Validation messages I want like   Required field  Please Enter Email Address Wrong Email   testing  com  is not a Valid Email Address   here  entered email address displayed in textbox   I have tried this   function check input          if input validity typeMismatch             input setCustomValidity       input value      is not a Valid Email Address                   else             input setCustomValidity                                     This function is not working properly  Do you have any other way to do this  It would be appreciated

User · Answer

you can just simply using the oninvalid   attribute  with the bingding the this setCustomValidity   eventListener   Here is my demo codes  you can run it to check out      x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt title gt oninvalid lt  title gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt form action  https   www google com hk webhp  safe strict amp q   method  post   gt  x000D           lt input type  email  placeholder  xgqfrms email xyz  required    autocomplete    autofocus    oninvalid  this setCustomValidity  This is a customlised invalid warning info     gt  x000D           lt input type  submit  value  Submit  gt  x000D       lt  form gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    reference link  http   caniuse com  feat form-validation  https   www w3 org TR html51 sec-forms html sec-constraint-validation

User · Answer

HTML    lt form id  myform  gt       lt input id  email  oninvalid  InvalidMsg this    name  email  oninput  InvalidMsg this     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

Just need to get the element and use the method setCustomValidity   Example  var foo   document getElementById  foo    foo setCustomValidity   An error occurred

User · Answer

Use the attribute  title  in every input tag and write a message on it

User · Answer

Try this     function         var elements   document getElementsByName  topicName        for  var i   0  i  lt  elements length  i              elements i  oninvalid   function e                e target setCustomValidity  Please enter Room Topic Title                          I tested this in Chrome and FF and it worked in both browsers

User · Answer

You can simply achieve this using oninvalid attribute  checkout this demo code   lt form gt   lt input type  email  pattern              required oninvalid  this setCustomValidity  Put  here custom message     gt   lt input type  submit   gt   lt  form gt      Codepen Demo  https   codepen io akshaykhale1992 pen yLNvOqP

User · Answer

This works well for me   jQuery document  ready function          var intputElements   document getElementsByTagName  INPUT        for  var i   0  i  lt  intputElements length  i              intputElements i  oninvalid   function  e                e target setCustomValidity                  if   e target validity valid                    if  e target name     email                         e target setCustomValidity  Please enter a valid email address                       else                       e target setCustomValidity  Please enter a password                                                           and the form I m using it with  truncated     lt form id  welcome-popup-form  action  authentication  method  POST  gt       lt input type  hidden  name  signup  value  1  gt       lt input type  email  name  email  id  welcome-email  placeholder  Email  required gt  lt  div gt       lt input type  password  name  passwd  id  welcome-passwd  placeholder  Password  required gt       lt input type  submit  id  submitSignup  name  signup  value  SUBMIT    gt   lt  form gt

User · Answer

Code snippet  Since this answer got very much attention  here is a nice configurable snippet I came up with            author ComFreek  lt https   stackoverflow com users 603003 comfreek gt       link https   stackoverflow com a 16069817 603003      license MIT 2013-2015 ComFreek      license dual licensed  CC BY-SA 3 0 2013-2015 ComFreek     You MUST retain this license header        function  exports        function valOrFunction val  ctx  args            if  typeof val     function                 return val apply ctx  args             else               return val                       function InvalidInputHelper input  options            input setCustomValidity valOrFunction options defaultText  window   input              function changeOrInput                 if  input value                          input setCustomValidity valOrFunction options emptyText  window   input                   else                   input setCustomValidity                                       function invalid                 if  input value                          input setCustomValidity valOrFunction options emptyText  window   input                   else                  input setCustomValidity valOrFunction options invalidText  window   input                                      input addEventListener  change   changeOrInput           input addEventListener  input   changeOrInput           input addEventListener  invalid   invalid             exports InvalidInputHelper   InvalidInputHelper     window     Usage   rarr  jsFiddle   lt input id  email  type  email  required  required    gt    InvalidInputHelper document getElementById  email        defaultText   Please enter an email address       emptyText   Please enter an email address       invalidText  function  input        return  The email address      input value      is invalid              More details   defaultText is displayed initially emptyText is displayed when the input is empty  was cleared  invalidText is displayed when the input is marked as invalid by the browser  for example when it s not a valid email address    You can either assign a string or a function to each of the three properties   If you assign a function  it can accept a reference to the input element  DOM node  and it must return a string which is then displayed as the error message   Compatibility  Tested in    Chrome Canary 47 0 2 IE 11 Microsoft Edge  using the up-to-date version as of 28 08 2015  Firefox 40 0 3 Opera 31 0     Old answer  You can see the old revision here  https   stackoverflow com revisions 16069817 6

User · Answer

Man  I never have done that in HTML 5 but I ll try  Take a look on this fiddle   I have used some jQuery  HTML5 native events and properties and a custom attribute on input tag this may cause problem if you try to validade your code   I didn t tested in all browsers but I think it may work   This is the field validation JavaScript code with jQuery     document  ready function            input required   input required  required     each function i  e                e oninput   function el                        el target setCustomValidity                   if  el target type     email                                 if  el target validity patternMismatch                                        el target setCustomValidity  E-mail format invalid                          if  el target validity typeMismatch                                                 el target setCustomValidity  An e-mail address must be given                                                                               e oninvalid   function el                        el target setCustomValidity  el target validity valid   e attributes requiredmessage value                                 Nice  Here is the simple form html    lt form method  post  action    id  validation  gt       lt input type  text  id  name  name  name  required  required  requiredmessage  Name is required     gt       lt input type  email  id  email  name  email  required  required  requiredmessage  A valid E-mail address is required   pattern    a-zA-Z0-9  -    a-zA-Z0-9-    a-zA-Z0-9       gt        lt input type  submit  value  Send it     gt   lt  form gt    The attribute requiredmessage is the custom attribute I talked about  You can set your message for each required field there cause jQuery will get from it when it will display the error message  You don t have to set each field right on JavaScript  jQuery does it for you  That regex seems to be fine at least it block your testing  com  haha   As you can see on fiddle  I make an extra validation of submit form event this goes on document ready too        validation   on  submit   function e        for  var i   0  i  lt  e target length  i                  if   e target i  validity valid                        window alert e target attributes requiredmessage value               e target focus                return false                        I hope this works or helps you in anyway

User · Answer

You can add this script for showing your own message      lt script gt       input   document getElementById  topicName                 input addEventListener  invalid   function  e                    if input validity valueMissing                                        e target setCustomValidity  Please enter topic name                        To Remove the sticky error message at end write               input addEventListener  input   function  e                    e target setCustomValidity                                    lt  script gt    For other validation like pattern mismatch you can add addtional if else condition  like   else if  input validity patternMismatch       e target setCustomValidity  Your Message        there are other validity conditions like rangeOverflow rangeUnderflow stepMismatch typeMismatch valid

User · Answer

You can do this setting up an event listener for the  invalid  across all the inputs of the same type  or just one  depending on what you need  and then setting up the proper message      forEach call  document querySelectorAll   type  email      function emailElement        emailElement addEventListener  invalid   function             var message   this value    is not a valid email address           emailElement setCustomValidity message         false        emailElement addEventListener  input   function             try emailElement setCustomValidity     catch e           false             The second piece of the script  the validity message will be reset  since otherwise won t be possible to submit the form  for example this prevent the message to be triggered even when the email address has been corrected   Also you don t have to set up the input field as required  since the  invalid  will be triggered once you start typing in the input   Here is a fiddle for that  http   jsfiddle net napy84 U4pB7 2  Hope that helps

[javascript] Set custom HTML5 required field validation message

reference link

Examples related to javascript

Examples related to jquery

Examples related to html