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

Question

I have seven input fields in a form and am using the jQuery validation plugin for validating each field. Validation is working fine if all input fields are empty. But its not working if one or two input field is empty and others have value. I want to show error message even if one field is empty.

Here is my form:

 <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>

My jQuery Validation:

<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>

Please help me to fix the problem..

Answer 1

A simple solution is to make all your default <select> options value="" and just create a standard validation:

Demo:

https://jsfiddle.net/re3yc0h1/

Form: Notice I have changed the dropdowns.

<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 Validation

<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>