为啥如果有一个无效的字段，需要有效的表单 2 次才能获得有效的下一个字段？

Posted 2023-05-09

【中文标题】为啥如果有一个无效的字段，需要有效的表单 2 次才能获得有效的下一个字段？

【英文标题】：Why if has a invalid field, need valid form 2 time for valid next field?为什么如果有一个无效的字段，需要有效的表单 2 次才能获得有效的下一个字段？

【发布时间】：2014-05-09 10:49:13

【问题描述】：

我已经为我的表单验证设置了自定义验证，但是如果有一个无效的字段，我需要输入值并验证 2 次，只有在第二次，它才会有效下一个字段，有什么问题？

View in jsfiddle

我的表格：

<form>
    <label>Login:</label>
    <input type="text" name="login" id="login" required/><br/>
    <label>Password:</label>
    <input type="password" name="pass" id="pass" required/><br/>
    <label>Password Confirm:</label>
    <input type="password" name="pass_conf" id="pass_conf" required/><br/>

    <input type="submit"/>
</form>

我的 javascript：

// This code is loaded in $(document).ready();
$("input").on("invalid", function (e) 
    console.log("Invalidd");
    if (!e.target.validity.valid) 
        var msg = "";
        if (e.target.validity.valueMissing) 
            msg = "Esse campo é obrigatorio.";
        
        if (e.target.validity.patternMismatch) 
            msg = "Formato incorreto.";
        

        e.target.setCustomValidity(msg);
    
);

【参考方案1】：

您可能希望将更改事件添加到您的输入中，如mdn 示例中所示。

var inputs = $("form").find("input:not([type='submit'])"),
    validate = function (input) 
        var msg = "";

        if (!input.validity.valid) 
            if (input.validity.valueMissing) 
                msg = "Esse campo é obrigatorio.";
            
            if (e.target.validity.patternMismatch) 
                msg = "Formato incorreto.";
            
        
        input.setCustomValidity(msg);
    ;

inputs.on("change invalid", function (e) 
    validate(e.target);
);

demo