在 html5联系表单的必填字段中更改错误消息的语言

小开

最佳答案

setCustomValidity的用途不仅仅是设置验证消息，它本身标记字段也是无效的。它允许您编写本机不支持的自定义验证检查。

您有两种可能的方法来设置自定义消息，一种是不涉及 Javascript 的简单方法，另一种是涉及 Javascript 的方法。

最简单的方法是在 input 元素上简单地使用 title属性——它的内容与标准的浏览器消息一起显示。

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

enter image description here

如果只想显示自定义消息，则需要一些 Javascript。我已经在这把小提琴中为您提供了这两个例子。

小开

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;
}

演示:

Http://jsfiddle.net/patelriki13/sqq8e/4

小开

忘记 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:

<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"));
});

这是一个非常简单的例子。我希望这能对任何人有所帮助。

小开

<input type="text" id="inputName"  placeholder="Enter name"  required  oninvalid="this.setCustomValidity('Please Enter your first name')" >

这可以帮助你更好、更快、更方便、更简单。

小开

//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('') />

这可以帮助你更好、更快、更方便、更简单。

小开

这对我有用。

<input oninvalid="this.setCustomValidity('custom text on invalid')" onchange="this.setCustomValidity('')" required>

改变是必须的！

小开

使用 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.";
}

小开

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('')"
...

小开

<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的情况。

注意，处理程序是以 做出反应的方式传递的，但是其他的答案已经介绍了如何在普通的 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>