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

我试图更改html5表单字段中错误消息的语言

我有以下代码：

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

但在提交时，即使字段不是空的，我仍然会收到错误消息

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

我试过了

但随后会显示英文消息。有人知道如何在其他语言上显示错误消息吗

在这方面，Zoran

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

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

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

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

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

HTML:

演示：

如果您在oninvalid中忘记了这一点，请使用以下内容更改代码：

    oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"

---

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

HTML:

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

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


                    });
                });

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

这对我来说很有用

//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 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"
>

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

...
oninput="this.setCustomValidity('')"
...

---

你能展示setCustomValidity函数吗？我以为它是内置函数？？？不是吗？我将使用JavaScript解决方案。有什么简单的方法可以检查所有的空字段吗？在我的例子中，所有字段都是必需的，并且表单相当长。如何重写javascript，以便它检查所有字段？或者它必须是一个接一个的？带有标题的代码只能在自定义css中工作，或者只能在某些浏览器中工作。我添加了它，但我看不到土耳其消息我添加了一个应该检查所有输入、文本区域和选择字段的消息。您正在测试哪个浏览器？HTML5表单验证不受全面支持。即使是fiddle也无法将“title”添加到输入中。title属性不再有效。在2018年，它在Chrome或Firefox上不起作用。不幸的是，这对我不起作用。在我尝试提交一个空字段后，消息确实出现了，但它总是出现，即使我填写了字段。不幸的是这对我不起作用你的。。。忘记标签上的要求！正如@Pedroaujorge所说，在第一次无效事件发生后，即使输入有效，也会显示错误消息。您必须使用setInterval将有效性字符串设置为1000毫秒后。否则输入元素仍然无效。@malthe setInterval将一次又一次地执行相同的操作，并且一旦完成，我们必须删除该间隔。@dimitar的解决方案和这都是无效的在我的浏览器中工作，但我更喜欢这种解决方案，因为表单元素上的onchange事件在元素失去焦点时触发，而不是在修改后立即触发。

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

<input
    oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
    oninput="this.setCustomValidity('')"
    required="required"
    type="text"
    name="text"
>

...
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
...

...
oninput="this.setCustomValidity('')"
...