檢查所有表單字段是否都有輸入jQuery
[英]Check if all form fields have inputs jQuery
問題描述
我的頁面上有一個表單，我想通過jQuery禁用提交按鈕，直到所有表單字段都有值。 我也有服務器端驗證，但我寧願使用一些客戶端驗證來緩解我服務器上的壓力。 我目前在數組中保存表單的所有元素，然后遍歷每個元素並檢查是否為空。 每次用戶在表單中輸入數據時，我還需要調用此函數，以檢查是否所有輸入都已填充。 這似乎給我的瀏覽器帶來了巨大的壓力並使頁面崩潰，下面是代碼。
let inputArray = [
$('.registration-form #inputEmail'),
$('.registration-form #inputForename'),
$('.registration-form #inputSurname'),
$('.registration-form #inputJobTitle'),
$('.registration-form #inputJobFunction'),
$('.registration-form #inputCompanyName'),
$('.registration-form #inputCompanySize')
];
let $registerButton = $('.create-account-button');
function checkFields() {
inputArray.forEach(function (input) {
if (!$(input).val()) {
$registerButton.prop('disabled', true);
} else {
$registerButton.prop('disabled', false);
}
input.on('input', checkFields);
});
}
5 個解決方案
解決方案1
1 已采納 2017-10-26 07:43:58
根據我的評論：你的問題過於復雜 - 瀏覽器崩潰的原因是你在無限循環中調用checkFields 。 你想做的事情很簡單：
- 為要驗證的所有輸入字段提供一個類，比如給它們一個
validate類 - 綁定
onInput事件以調用這些輸入字段。 當提供元素集合時，jQuery將自動迭代地綁定相同的事件處理程序 - 在
onInput事件的回調中，您只需要檢查是否有任何字段為空的邏輯。 這是通過使用.map()和.filter()來返回一個空字段數組來完成的。 通過檢查此數組的長度，有條件地禁用/啟用提交按鈕。
點＃3可能有點復雜，所以這里是它的細分：
-
.map()用於返回類似數組的對象。 在回調函數中使用return this.value意味着您希望將每個輸入的值推送到此arrya中。 - 之后鏈接
.get()因為.map()不返回true數組 -
.filter()用於從數組中刪除非空的項，使用當數組項的長度（在本例中為input元素的值）為0時返回true的回調函數
這將返回一個空字段數組。 然后，您可以使用.prop('disabled', <boolean>)來有條件地啟用或禁用提交按鈕。 !!emptyFields.length表達式用於確保返回布爾值：
- 當沒有空字段（長度為0）時，
!!0返回false。 - 當有空字段（長度> = 1）時，
!!<n>返回true。
請參閱下面的概念驗證：
$(function() { // Cache fields that you want to validate var $fieldsToCheck = $('.registration-form .validate'); // Function to ensure fields are not empty var checkFields = function() { // Get array of empty fields var emptyFields = $fieldsToCheck.map(function() { return this.value; }).get().filter(function(val) { return val.length === 0; }); // Disabled prop to be toggled based on length of empty fields $('.create-account-button').prop('disabled', !!emptyFields.length); }; // Bind onInput event to all inputs you want to check $fieldsToCheck.on('input', checkFields); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="registration-form"> <input name="email" class="validate" type="text" /> <input name="forename" class="validate" type="text" /> <input name="surname" class="validate" type="text" /> <button class="create-account-button" disabled>Create account</button> </form>
解決方案2
1 2017-10-26 07:54:34
不要重新發明wheel jquery驗證插件
但如果你真的想
$(document).ready(function(){ var form = $('form'), submitButton = $("#btnSubmit"), isValid = true; submitButton.click(function(event){ event.preventDefault(); isValid = true; form.children("input").each(function(index,element) { if(!element.value.trim()) isValid = false; }); console.log(isValid); if(isValid) form.submit(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input id="btnSubmit" type="submit" value="Submit"> </form>
解決方案3
1 2017-10-26 08:23:25
我同意Nick使用jQuery插件
這是使用插件的一個工作示例：
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<style>
input{
width:100px;
margin-bottom: 3px;
clear:both;
}
form#form-to-validate {
float: left;
display: block;
width: 100px;
}
</style>
</head>
<body>
<form id="form-to-validate">
<input class="registration-form" id='inputEmail' name="inputEmail"/>
<input class="registration-form" id='inputForename' name='inputForename'/>
<input class="registration-form" id='inputSurname' name='inputSurname'/>
<input class="registration-form" id='inputJobTitle' name='inputJobTitle'/>
<input class="registration-form" id='inputCompanyName' name='inputCompanyName'/>
<input class="registration-form" id='inputCompanySize' name='inputCompanySize'/>
<input type="submit"/>
</form>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#form-to-validate" ).validate({
rules: {
inputEmail: {
required: true,
email: true
},
inputForename: {
required: true
},
inputSurname: {
required: true
},
inputJobTitle: {
required: true
},
inputCompanyName: {
required: true
},
inputCompanySize: {
required: true
}
}
});
</script>
</body>
</html>
解決方案4
0 2017-10-26 07:38:47
嘗試這個
let inputArray = [
$('.registration-form #inputEmail'),
$('.registration-form #inputForename'),
$('.registration-form #inputSurname'),
$('.registration-form #inputJobTitle'),
$('.registration-form #inputJobFunction'),
$('.registration-form #inputCompanyName'),
$('.registration-form #inputCompanySize')
];
let $registerButton = $('.create-account-button');
function checkFields() {
inputArray.forEach(function (input) {
if (!$(input).val()) {
$registerButton.prop('disabled', true);
} else {
$registerButton.prop('disabled', false);
}
});
}
inputArray.forEach(function (input) {
input.on('input', checkFields);
})
解決方案5
0 2017-10-26 07:51:00
純Javascript版本。 讓我們采取Bootstrap形式。
將validate類添加到您需要檢查的輸入：
<form class="registration-form">
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control validate" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control validate" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control validate" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control validate" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary create-account-button">Submit</button>
</form>
var form = document.querySelector('.registration-form'),
form_elements = form.querySelectorAll('.validate'),
btn = document.querySelector('.create-account-button');
function checkFields() {
var error = 0;
Array.prototype.slice.call( form_elements ).forEach(function( input ) {
if ( input.value.length == 0 ) {
error++;
}
});
if ( error > 0 ){
btn.setAttribute( 'disabled', 'disabled' );
} else {
btn.removeAttribute( 'disabled' );
}
}
document.addEventListener( 'DOMContentLoaded', checkFields, false );
Array.prototype.slice.call( form_elements ).forEach(function( input ) {
input.addEventListener( 'input', checkFields, false );
});
jQuery循環表單以檢查所有空字段，然后執行一個函數
[英]Jquery loop form to check for all empty fields then execute a function
如何使用 jQuery 清除表單中的所有輸入、選擇和隱藏字段？
[英]How to clear all inputs, selects and also hidden fields in a form using jQuery?
jQuery - 在所有字段（輸入、選擇）中比較表單提交上的新值和舊值？
[英]jQuery - Compare new value with old value on form submit, across all fields (inputs, selects)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.