Html 在 html5 联系表单中的必填字段中更改错误消息的语言
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10753881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
changing the language of error message in required field in html5 contact form
提问by Zoran
I am trying to change the language of the error message in the html5 form field.
我正在尝试更改 html5 表单字段中错误消息的语言。
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 />
我试过 <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
问候，卓然
回答by janfoeh
setCustomValidity's purpose is not just to set the validation message, it itself marksthe field as invalid. It allows you to write custom validation checks which aren't natively supported.
setCustomValidity的目的不仅仅是设置验证消息，它本身将字段标记为无效。它允许您编写本机不支持的自定义验证检查。
You have two possible ways to set a custom message, an easy one that does not involve Javascript and one that does.
您有两种可能的方法来设置自定义消息，一种不涉及 Javascript 的简单方法，另一种涉及 Javascript。
The easiest way is to simply use the titleattribute on the input element - its content is displayed together with the standard browser message.
最简单的方法是简单地使用titleinput 元素上的属性 - 它的内容与标准浏览器消息一起显示。
<input type="text" required title="Lütfen i?aretli yerleri doldurunuz" />
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.
如果您只想显示您的自定义消息，则需要一些 Javascript。我在这个 fiddle 中为你提供了两个例子。
回答by javad shariaty
your forget thisin oninvalid, change your code with this:
你忘记this了oninvalid，用这个改变你的代码：
oninvalid="this.setCustomValidity('Lütfen i?aretli yerleri doldurunuz')"
<form><input type="text" name="company_name" oninvalid="this.setCustomValidity('Lütfen i?aretli yerleri doldurunuz')" required /><input type="submit">
</form>回答by Rikin Patel
HTML:
HTML：
<form id="myform">
<input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" />
<input type="submit" />
</form>
JAVASCRIPT :
爪哇脚本：
function InvalidMsg(textbox) {
if (textbox.value == '') {
textbox.setCustomValidity('Lütfen i?aretli yerleri doldurunuz');
}
else if (textbox.validity.typeMismatch){{
textbox.setCustomValidity('please enter a valid email address');
}
else {
textbox.setCustomValidity('');
}
return true;
}
Demo :
演示：
回答by R. Canser Yanbakan
I know this is an old post but i want to share my experience.
我知道这是一个旧帖子，但我想分享我的经验。
HTML:
HTML：
<input type="text" placeholder="Username or E-Mail" required data-required-message="E-Mail or Username is Required!">
Javascript (jQuery):
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.
这是一个非常简单的示例。我希望这可以帮助任何人。
回答by dimitar
This work for me.
这对我有用。
<input oninvalid="this.setCustomValidity('custom text on invalid')" onchange="this.setCustomValidity('')" required>
onchange is a must!
onchange 是必须的！
回答by Othman Mahmoud
//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);
}
}
});
});
回答by Tahir Khurshid
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Your Message')" oninput="this.setCustomValidity('') />
this can help you even more better, Fast, Convenient & Easiest.
这可以帮助您更好、更快、更方便、更轻松。
回答by Ron16
Do it using JS. Grab the class of the error message, and change it's content for whereever it appears.
用JS来做。获取错误消息的类别，并在出现的任何位置更改其内容。
var myClasses = document.getElementsByClassName("wpcf7-not-valid-tip");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "Bitte füllen Sie das Pflichtfeld aus.";
}
回答by Shashank Malviya
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Please Enter your first name')" >
this can help you even more better, Fast, Convenient & Easiest.
这可以帮助您更好、更快、更方便、更轻松。
