使用jquery檢查表單的所有空字段

Question

嗨，大家好我是jquery的新手我想在我的表單上放置一個檢查，當我提交表單的函數時，只需檢查表單的所有字段，如果任何字段爲空只顯示一個錯誤，請填寫所有內容 這裏是我的代碼：

function validate() { 
 
    //get all inputs of the form in array 
 
    var inputs = $('#form :input'); 
 
    var k = 0; 
 
    inputs.each(function() { 
 
    if ($(this).val() == '') { 
 
     k = 1; 
 
    } 
 
    }); 
 
    if (k == 1) { 
 
    alert('please fill all fields'); 
 
    } else { 
 
    alert('submitted successfully'); 
 
    } 
 
} 
 

 
function postvalue(id) { 
 
    $('#value').val(id); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-horizontal" id="form"> 
 
    <fieldset> 
 
    <!-- Form Name --> 
 
    <legend>Form Name</legend> 
 
    <div class="form-group"> 
 
     <input type="hidden" value="" id="value" /> 
 
     <label class="col-md-4 control-label">Double Button</label> 
 
     <div class="col-md-8"> 
 
     <button type="button" onclick="postvalue(1)">click</button> 
 
     </div> 
 
    </div> 
 
    <!-- Select Basic --> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label" for="selectbasic">Select Basic</label> 
 
     <div class="col-md-8"> 
 
     <select id="selectbasic" name="selectbasic" class="form-control valid"> 
 
     <option value="">select option</option> 
 
     <option value="2">Option one</option> 
 
    </select> 
 
     </div> 
 
    </div> 
 
    <!-- Button (Double) --> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label">Double Button</label> 
 
     <div class="col-md-8"> 
 
     <input type="number" class="valid" /> 
 
     </div> 
 
    </div> 
 
    <input type="submit" value="submit" onclick="validate()" /> 
 
    </fieldset> 
 
</form>

Answer 1

這很簡單：

$('#form').submit(function(e) { //on form submit event 
    var emptyInputs = $(this).find("input, select") //find input and select as I see in your html 
    .not('[type="hidden"]') //not hidden 
    .filter(function() { //get all empty 
     return $(this).val() == ""; 
    }); 
    if (emptyInputs.length) { //if any empty 
    alert('please fill all fields'); //show message 
    e.preventDefault(); //prevent post form 
    } 
}); 


function postvalue(id) { 
    $('#value').val(id); 
} 

在這裏工作JsFiddle

Answer 2

我猜你不想提交表單，如果一些輸入是空

$('#form').on('submit', function(e) { 
 
    e.preventDefault(); // prevent form from submitting 
 

 
    var inputs = $('#form').find('input, select').not('[type="hidden"]'); 
 
    var k = 0; 
 

 
    inputs.each(function() { 
 
    console.log(this) 
 
    if ($(this).val() == '') { 
 
     k = 1; 
 
    } 
 
    }); 
 
    
 
    if (k == 1) { 
 
    alert('please fill all fields'); 
 
    } else { 
 
    alert('submitted successfully'); 
 
    this.submit(); // submit form if valid 
 
    } 
 
}); 
 

 
$('#postValue').on('click', function() { 
 
    $('#value').val('1'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form-horizontal" id="form"> 
 
    <fieldset> 
 
    <!-- Form Name --> 
 
    <legend>Form Name</legend> 
 
    <div class="form-group"> 
 
     <input type="hidden" value="" id="value" /> 
 
     <label class="col-md-4 control-label">Double Button</label> 
 
     <div class="col-md-8"> 
 
     <button type="button" id="postValue">click</button> 
 
     </div> 
 
    </div> 
 
    <!-- Select Basic --> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label" for="selectbasic">Select Basic</label> 
 
     <div class="col-md-8"> 
 
     <select id="selectbasic" name="selectbasic" class="form-control valid"> 
 
     <option value="">select option</option> 
 
     <option value="2">Option one</option> 
 
    </select> 
 
     </div> 
 
    </div> 
 
    <!-- Button (Double) --> 
 
    <div class="form-group"> 
 
     <label class="col-md-4 control-label">Double Button</label> 
 
     <div class="col-md-8"> 
 
     <input type="number" class="valid" /> 
 
     </div> 
 
    </div> 
 
    <input type="submit" value="submit" /> 
 
    </fieldset> 
 
</form>

注意:input選擇所有輸入，文本區域，選擇和按鈕元素，並看到你沒有價值的按鈕，它總是會失敗。