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>