我想要改变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 />
但是接下来会显示英文消息。 有人知道如何显示其他语言的错误消息吗？
敬礼，Zoran
<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />
如果您只想显示自定义消息，则需要一些JavaScript。我已经在这个fiddle中为您提供了两个示例。
你在oninvalid中忘记了this，请使用以下代码进行更改：
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"));
});
这是一个非常简单的示例。我希望这能帮助任何人。
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('')"
...
//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);
}
}
});
});
event.target.validity属性并使用event.target.setCustomValidity(message)覆盖相应的错误消息。如果您只关心空字段情况，就像OP一样，请考虑valueMissing的情况。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('Your Message')" oninput="this.setCustomValidity('') />
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Please Enter your first name')" >
这可以帮助您更加快速、方便和容易。
setInterval 来在例如 1000 毫秒后将有效字符串设置为 ""。否则，输入元素仍然是“无效的”。 - malthe
setCustomValidity函数吗？ - antyrat