changing the language of error message in required field in html5 contact form

Question

I am trying to change the language of the error message in the html5 form field   I have this code    lt input type  text  name  company name   oninvalid  setCustomValidity  L  tfen isaretli yerleri doldurunuz    required   gt     but on submit  even the field is not blank  I still get the error message   I tried with  lt input type  text  name  company name   setCustomValidity  L  tfen isaretli yerleri doldurunuz   required   gt   but then the english message is displayed  Anyone know how can I display the error message on other language   Regards Zoran

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  L  tfen isaretli yerleri doldurunuz              else if  textbox validity typeMismatch            textbox setCustomValidity  please enter a valid email address              else          textbox setCustomValidity                return true      Demo    http   jsfiddle net patelriki13 Sqq8e 4

User · Answer

setCustomValidity s purpose is not just to set the validation message  it itself marks the field as invalid  It allows you to write custom validation checks which aren t natively supported    You have two possible ways to set a custom message  an easy one that does not involve Javascript and one that does   The easiest way is to simply use the title attribute on the input element - its content is displayed together with the standard browser message    lt input type  text  required title  L  tfen isaretli yerleri doldurunuz    gt      If you want only your custom message to be displayed  a bit of Javascript is required  I have provided both examples for you in this fiddle

User · Answer

x000D   x000D   lt form gt     lt input     type  text      name  company name      oninvalid  this setCustomValidity  L  tfen isaretli yerleri doldurunuz        required     gt  lt input type  submit    gt   lt  form gt  x000D   x000D   x000D

User · Answer

TLDR  Usually  you don t need to change the validation message but if you do use this   lt input     oninvalid  quot this setCustomValidity  Your custom message             quot      oninput  quot this setCustomValidity     quot      required  quot required quot      type  quot text quot      name  quot text quot   gt   The validation messages are coming from your browser and if your browser is in English the message will be in English  if the browser is in French the message will be in French and so on  If you an input for which the default validation messages doesn t work for you  the easiest solution is to provide your custom message to setCustomValidity as a parameter      oninvalid  quot this setCustomValidity  Your custom message             quot       This is a native input s method which overwrites the default message  But now we have one problem  once the validation is triggered  the message will keep showing while the user is typing  So to stop the message from showing you can set the validity message to empty string using the oninput attribute      oninput  quot this setCustomValidity     quot

User · Answer

your forget this in oninvalid  change your code with this       oninvalid  this setCustomValidity  L  tfen isaretli yerleri doldurunuz        x000D   x000D   lt form gt  lt input type  text  name  company name   oninvalid  this setCustomValidity  L  tfen isaretli yerleri doldurunuz    required   gt  lt input type  submit  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Dynamic custome validation on all fields   add validate-msg attr to all inputs   add this js code     form  input   each function                        var input     this                       var msg     input attr  validate-msg                        input on  change invalid input   function                            input 0  setCustomValidity                              if   input 0  validity tooLong    input 0  validity tooShort                                if    input 0  validity valid                                    input 0  setCustomValidity msg

User · Answer

lt input type  text  id  inputName   placeholder  Enter name   required  oninvalid  this setCustomValidity  Your Message    oninput  this setCustomValidity       gt    this can help you even more better  Fast  Convenient  amp  Easiest

User · Answer

I know this is an old post but i want to share my experience   HTML    lt input type  text  placeholder  Username or E-Mail  required data-required-message  E-Mail or Username is Required   gt    Javascript  jQuery       input required    on  invalid   function         this setCustomValidity   this  data  required-message           This is a very simple sample  I hope this can help to anyone

User · Answer

lt input type  text  id  inputName   placeholder  Enter name   required  oninvalid  this setCustomValidity  Please Enter your first name     gt    this can help you even more better  Fast  Convenient  amp  Easiest

User · Answer

This work for me     lt input oninvalid  this setCustomValidity  custom text on invalid    onchange  this setCustomValidity      required gt    onchange is a must

User · Answer

Do it using JS  Grab the class of the error message  and change it s content for whereever it appears    var myClasses   document getElementsByClassName  wpcf7-not-valid-tip     for  var i   0  i  lt  myClasses length  i          myClasses i  innerHTML    Bitte f  llen Sie das Pflichtfeld aus

[forms] changing the language of error message in required field in html5 contact form

Examples related to forms

Examples related to html