jquery 表单验证的问题：不适用于一两个空输入字段

Question

我在一个表单中有七个输入字段，并且正在使用 jQuery 验证插件来验证每个字段。如果所有输入字段为空，则验证工作正常。但是如果一个或两个输入字段为空而其他输入字段具有价值，则它不起作用。即使一个字段为空，我也想显示错误消息。

这是我的表格：

 <form role="form" class="form-inline" enctype="multipart/form-data" method="post" action="insert.php" id="frmForm">
     <label >Audit Type</label>
     <select  name="type" >
        <option value="0">select type </option>
        <option value="typ1"> type 1</option>
        <option value="typ2"> type 2</option>
     </select>
     <label> Site</label>
     <select  name="site" >
        <option value="0">select site </option>
        <option value="site1"> site 1</option>
        <option value="site2"> site 2</option>
     </select>
     <label> Function</label>
     <select  name="dept" >
        <option value="0">select function </option>
        <option value="fn1"> function 1</option>
        <option value="fn2"> function 2</option>
     </select>
     <label> Title</label>
     <input type="text" name="title"/>
     <label> Objective</label>
     <input type="text" name="obj"/>
     <label> Standard</label>
     <select  name="stand" >
        <option value="0" >select  standard</option>
        <option value="1" >  standard 1 </option>
        <option value="2" >  standard 2</option>
     </select>
     <label> Remarks</label>
     <textarea  name="remarks"></textarea>
 </form>

我的 jQuery 验证：

<script>                        
$(document).ready(function(){
    $("#frmForm").validate({
        rules: {
            type: {
                selectcheck: true
            },
            site: {
                selectsite: true
            },
            dept: {
                selectdept: true
            },
            stand: {
                selectstd: true
            },
            title: {
                required: true,
                title: true
            },
            obj: {
                required: true,
                obj: true
            },
            remarks: {
                required: true,
                remarks: true
            }   
        }
    });
});

jQuery.validator.addMethod('selectcheck', function (value) {
    return (value != '0');
}, "This field is required ");

jQuery.validator.addMethod('selectsite', function (value) {
    return (value != '0');
}, "This field is required ");

jQuery.validator.addMethod('selectdept', function (value) {
    return (value != '0');
}, "This field is required ");

jQuery.validator.addMethod('selectstd', function (value) {
    return (value != '0');
}, "This field is required ");
</script>

请帮我解决问题..

Answer 1

一个简单的解决方案是将所有默认的<select> 选项设置为value="" 并创建一个标准验证：

演示：

https://jsfiddle.net/re3yc0h1/

表单：请注意，我已更改下拉菜单。

<form role="form" class="form-inline" enctype="multipart/form-data" method="post" action="insert.php" id="frmForm">
     <label >Audit Type</label>
     <select  name="type" >
        <option value="">select type </option>
        <option value="typ1"> type 1</option>
        <option value="typ2"> type 2</option>
     </select>
     <label> Site</label>
     <select  name="site" >
        <option value="">select site </option>
        <option value="site1"> site 1</option>
        <option value="site2"> site 2</option>
     </select>
     <label> Function</label>
     <select  name="dept" >
        <option value="">select function </option>
        <option value="fn1"> function 1</option>
        <option value="fn2"> function 2</option>
     </select>
     <label> Title</label>
     <input type="text" name="title"/>
     <label> Objective</label>
     <input type="text" name="obj"/>
     <label> Standard</label>
     <select  name="stand" >
        <option value="" >select  standard</option>
        <option value="1" >  standard 1 </option>
        <option value="2" >  standard 2</option>
     </select>
     <label> Remarks</label>
     <textarea  name="remarks"></textarea>
     <input type="submit" name="submit" value="SUBMIT" />
 </form>

jQuery 验证

<script>                        
$(document).ready(function(){
    $("#frmForm").validate({
        rules: {
            type: "required",
            site: "required",
            dept: "required",
            title: "required",
            obj: "required",
            stand: "required",
            remarks: "required"
        },
        messages: {
            type: "You can not leave Type empty",
            site: "You can not leave Site empty",
            dept: "You can not leave Dept empty",
            title: "Title is required",
            obj: "You must have an object",
            stand: "Standard is required",
            remarks: "Please leave remarks"
        }
    });
});
</script>