Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

forms

I am trying to change the language of the error message in the html5 form field.

I have this code:

<input type="text" name="company_name"  oninvalid="setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required />  

but on submit, even the field is not blank, I still get the error message.

I tried with <input type="text" name="company_name" setCustomValidity('Lütfen işaretli yerleri doldurunuz') required />

but then the english message is displayed. Anyone know how can I display the error message on other language?

Regards,Zoran

like image 596
Zoran Avatar asked May 25 '12 11:05

Zoran


People also ask

How do you change required in HTML?

The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

How do I show error in HTML5?

Show activity on this post. You can now use the HTMLFormElement. reportValidity() method, at the moment it's implemented in most browsers except Internet Explorer (see Browser compatibility at MDN). It reports validity errors without triggering the submit event and they are shown in the same way.


1 Answers

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.

<input type="text" required title="Lütfen işaretli yerleri doldurunuz" /> 

enter image description here

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.

like image 134
janfoeh Avatar answered Sep 18 '22 14:09

janfoeh