在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的简单方法和一种方式.

最简单的方法是简单地title在输入元素上使用该属性 - 其内容与标准浏览器消息一起显示.

<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('please enter a valid email address');
    }
    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

TLDR：通常，您不需要更改验证消息，但如果您确实使用此消息：

\n

<input\n    oninvalid="this.setCustomValidity('Your custom message / \xe6\x82\xa8\xe7\x9a\x84\xe8\x87\xaa\xe5\xae\x9a\xe4\xb9\x89\xe4\xbf\xa1\xe6\x81\xaf')"\n    oninput="this.setCustomValidity('')"\n    required="required"\n    type="text"\n    name="text"\n>\n

\n

验证消息来自您的浏览器，如果您的浏览器是英语，则消息将是英语，如果浏览器是法语，则消息将是法语，依此类推。

\n

如果默认验证消息对您不起作用，最简单的解决方案是将您的自定义消息提供给setCustomValidity参数。

\n

...\noninvalid="this.setCustomValidity('Your custom message / \xe6\x82\xa8\xe7\x9a\x84\xe8\x87\xaa\xe5\xae\x9a\xe4\xb9\x89\xe4\xbf\xa1\xe6\x81\xaf')"\n...\n

\n

这是覆盖默认消息的本机输入方法。但现在我们有一个问题，一旦触发验证，消息将在用户输入时继续显示。因此，要阻止消息显示，您可以使用该oninput属性将有效性消息设置为空字符串。

\n

...\noninput="this.setCustomValidity('')"\n...\n

\n