jquery 验证插件：验证隐藏输入，跳过所需的输入文本

Posted 2023-05-09

【中文标题】jquery 验证插件：验证隐藏输入，跳过所需的输入文本

【英文标题】：jquery validation plugin: validating hidden input, skips required input text

【发布时间】：2013-02-09 03:20:10

【问题描述】：

我正在尝试验证具有隐藏和非隐藏输入的表单。我在表单验证设置中添加了行 ignore: "" 来验证隐藏的输入，但是这样做，它不会验证它之前的所需文本输入，但只有在它之后才验证。 发生的另一件事是，firstname 的验证在第一次提交后对 blur 起作用（但它仍然不会阻止提交本身）....

这是我的代码，以及 js fiddle DEMO 的链接：

JS：

    var countries = [label:"Vanuatu", code:"VU",
        label:"Ecuador", code:"EC"];    
    $().ready(function() 
$('#country').autocomplete(
    source : function(request, response) 
        var matcher = new RegExp('^'+$.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(countries, function(element, index) 
            return matcher.test(element.label);
        ));
    ,
    delay : 0,
    change : function(event, ui) 
        $('#countryCode').val(ui.item ? ui.item.code : '');
    
);
$("#signupForm").validate(
    ignore: "",
    rules: 
        firstname: 
            required: true
        ,
        lastname: 
            required: true
        ,
        country: 
            required: true
        ,
        countryCode: 
            required: function(element)
                return $("#signupForm").validate().element( "#country" );
            
        ,
        email: 
            required: true,
            email: true
        
    ,  
    messages: 
        firstname: "Please enter your first name",
        lastname: "Please enter your last name",
        country: "Please select a country",
        countryCode: "Please select a valid country",
        email: "Please enter a valid email address"
    ,
    submitHandler: function(form) 
        alert("fine!");
    
);

); html 表单：

    <form id="signupForm" method="post" name="" action="">
<p>
        <label for="firstname"></label>
        <input class="inputText" type="text" id="firstname" name="firstname" placeholder="First Name">
    </p>
            <p>
        <label for="country"></label>
        <input class="inputText" type="text" id="country" name="country" placeholder="Country"/>

        <input type="hidden" name="countryCode" id="countryCode" />
    </p>
                <p>
        <label for="lastname"></label>
        <input class="inputText" type="text" id="lastname" name="lastname" placeholder="Last Name">
                    </p>
                    <p>
        <label for="email"></label>
        <input class="inputText" type="text" id="email" name="email" placeholder="Email">
                        </p>
                        <p>
        <input class="submit" type="submit" id="signupButton" value="SUBMIT" />   
                        </p>
    </form> 

【问题讨论】：

countryCode 验证的逻辑是什么？只有在指定country 时才需要？

是的，因为我需要验证是否从自动完成中选择了一个有效的国家。这样我就有了填写国家的验证，并选择了国家代码（国家代码是服务器端需要的）。

你能检查一下jsfiddle.net/arunpjohny/68uu5/3，看看是否满足你的要求

另请参阅此答案以了解使用 ignore 选项的正确方法。应该是ignore: [] 见***.com/a/8565769/594235

【参考方案1】：

我认为问题在于countryCode 验证

你可以试试

countryCode: 
    required: function(element)
        return $("#country").val().length > 0;
    

演示：Fiddle

【讨论】：

非常感谢！我认为 country 元素上的 .validate() 会做到这一点....您认为向开发人员报告这是一个错误吗？

我认为element 方法被设计为与回调方法一起调用，您可以向开发人员询问任何方式