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

Question

我正在尝试更改 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 />

但随后显示英文消息。任何人都知道如何以其他语言显示错误消息？

问候，佐兰

Answer 1

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

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

这对我有用。

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

onchange 是必须的！

Answer 5

我知道这是一个旧帖子，但我想分享我的经验。

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

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

Answer 6

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


                    });
                });

Answer 7

<input type="text" id="inputName"  placeholder="Enter name"  required  oninvalid="this.setCustomValidity('Your Message')" oninput="this.setCustomValidity('') />

这可以帮助您更好、更快、更方便、更轻松。

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

对于正在寻找一种方法来完全本地化他们的错误信息的迷失灵魂，请参阅下面的片段。简而言之，您必须使用 切换属性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>

Answer 12

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

这可以帮助您更好、更快、更方便、更轻松。