我正在尝试更改 html5 表单字段中错误消息的语言。
我有这个代码：
<input type="text" name="company_name" oninvalid="setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required />
但是在提交时，即使该字段不是空白的，我仍然会收到错误消息。
我试过了<input type="text" name="company_name" setCustomValidity('Lütfen işaretli yerleri doldurunuz') required />
但随后显示英文消息。任何人都知道如何以其他语言显示错误消息？
问候，佐兰
setCustomValidity的目的不仅仅是设置验证消息，它本身将字段标记为无效。它允许您编写本机不支持的自定义验证检查。
您有两种可能的方法来设置自定义消息，一种简单的不涉及 Javascript，另一种则涉及。
最简单的方法是简单地使用titleinput 元素上的属性 - 它的内容与标准浏览器消息一起显示。
<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />
如果您只想显示您的自定义消息，则需要一些 Javascript。我在这个小提琴中为你提供了两个例子。
你忘记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>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('Lütfen işaretli yere geçerli bir email adresi yazınız.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
演示：
这对我有用。
<input oninvalid="this.setCustomValidity('custom text on invalid')" onchange="this.setCustomValidity('')" required>
onchange 是必须的！
我知道这是一个旧帖子，但我想分享我的经验。
HTML：
<input type="text" placeholder="Username or E-Mail" required data-required-message="E-Mail or Username is Required!">
Javascript（jQuery）：
$('input[required]').on('invalid', function() {
this.setCustomValidity($(this).data("required-message"));
});
这是一个非常简单的示例。我希望这对任何人都有帮助。
//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);
}
}
});
});
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Your Message')" oninput="this.setCustomValidity('') />
这可以帮助您更好、更快、更方便、更轻松。
TLDR：通常，您不需要更改验证消息，但如果您确实使用此：
<input
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
oninput="this.setCustomValidity('')"
required="required"
type="text"
name="text"
>
验证消息来自您的浏览器，如果您的浏览器是英文的，则消息将是英文的，如果浏览器是法语的，则消息将是法语的，依此类推。
如果您的输入默认验证消息不适合您，最简单的解决方案是将您的自定义消息setCustomValidity作为参数提供。
...
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
...
这是覆盖默认消息的本机输入方法。但是现在我们有一个问题，一旦触发验证，消息会在用户输入时一直显示。因此，要停止显示消息，您可以使用oninput属性将有效性消息设置为空字符串。
...
oninput="this.setCustomValidity('')"
...
使用 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.";
}
<form>
<input
type="text"
name="company_name"
oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"
required
/><input type="submit" />
</form>对于正在寻找一种方法来完全本地化他们的错误信息的迷失灵魂，请参阅下面的片段。简而言之，您必须使用 切换属性event.target.validity并覆盖相应的错误消息event.target.setCustomValidity(message)。如果您只关心作为 OP 的空字段案例，只需考虑valueMissing.
请注意，处理程序是以React方式传递的，但其他答案已经涵盖了如何在 vanilla JS 中执行此操作。
有关每个有效性状态的含义以及如何实现自定义错误消息，请参阅MDN：使用 JavaScript 验证表单。
const handleInvalidForm = (event) => {
const { patternMismatch,
tooLong,
tooShort,
rangeOverflow,
rangeUnderflow,
typeMismatch,
valid,
valueMissing } = event.target.validity;
if (patternMismatch)
event.target.setCustomValidity('...');
else if (tooLong)
event.target.setCustomValidity('...');
else if (tooShort)
event.target.setCustomValidity('...');
else if (rangeOverflow)
event.target.setCustomValidity('...');
else if (rangeUnderflow)
event.target.setCustomValidity('...');
else if (typeMismatch)
event.target.setCustomValidity('...');
else if (valid)
event.target.setCustomValidity('...');
else if (valueMissing)
event.target.setCustomValidity('...');
}
// ...
<form onSubmit={handleFormSubmit}
onInvalid={handleInvalidForm}
>
{emailTextField}
{passwordTextField}
{signInButton}
</form>
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Please Enter your first name')" >
这可以帮助您更好、更快、更方便、更轻松。