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

<强 > Demo:

http://jsfiddle.net/patelriki13/Sqq8e/4

这工作为我。

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

改变是必须的!

我知道这是一个老职位 但我想分享我的经验

HTML :

<input type="text" placeholder="Username or E-Mail" required data-required-message="E-Mail or Username is Required!">

Javascript (j 查询) :

$( 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 / 您的自定义信息 )"
...

这是一个本地输入方法, 覆盖默认信件。 但是现在我们有一个问题, 一旦验证被触发, 信件将会在用户输入时继续显示 。 所以要阻止信件显示您可以使用 < code> 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);
                            }
                        }


                    });
                });

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

它可以帮助您更好, 快速, 方便的 & amp; 最容易 。

对于正在寻找一种将错误信息完全定位到本地的方式的丢失的灵魂,请参见下面的片段。 简而言之, 您必须切换到 event. target. refidity 的属性, 并使用 event. target. setCustomvalidity( 消息) 推翻相应的错误信息。 如果您只把空字段作为 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>

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

它可以帮助您更好, 快速, 方便的 & amp; 最容易 。

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