檢查輸入是否在每個類元素上都有值，然后切換禁用的類jQuery
[英]Check input has value on each class element then toggle disabled class jQuery
問題描述
我正在嘗試檢查表單中每個輸入元素的值。 沒用 有人可以幫我在這里做錯什么嗎？ 謝謝
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>
function formIsInvalid() {
var flag = false,
name, date;
$('.form--group').each(function() {
name = $(this).find('.thename').val();
date = $(this).find('.date_of_birth').val().length == 10;
if (name == "" || date == "") {
flag = true;
}
});
return flag
}
//Toggle disbaled class
$('.form--group').on('keyup','input', function() {
//use other static element or document if not works
$('#stepbirth').toggleClass('disabled', formIsInvalid());
});
3 個解決方案
解決方案1
1 2019-07-31 10:25:37
您可以使用.trim()方法刪除值開頭的所有可用空間。 並檢查值是否存在。
實時示例： https ： //codepen.io/miladfm/pen/ZgKqNm
的HTML
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
<input class="thename" name="name[]" type="text" />
<input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>
的CSS
#stepbirth.disabled {
color: #999;
}
JS
function formIsInvalid() {
var isFormInvalid = false;
$('.form--group').each(function() {
var name = $(this).find('.thename').val();
var date = $(this).find('.date_of_birth').val();
if (!name.trim() || !date.trim()) {
isFormInvalid = true;
}
});
return isFormInvalid
}
$('.form--group').on('keyup','input', function() {
$('#stepbirth').toggleClass('disabled', formIsInvalid());
});
解決方案2
0 2019-07-31 10:30:23
由於元素'a'沒有內置的禁用屬性，因此您應該為它創建一個樣式，如下所述。
a.disabled { pointer-events: none; cursor: default; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="form--group"> <input class="thename" name="name[]" type="text" /> <input type="text" class="date date_of_birth" name="date[]" /> </div> <div class="form--group"> <input class="thename" name="name[]" type="text" /> <input type="text" class="date_of_birth" name="date[]" /> </div> <a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a> <script> function formIsInvalid() { var flag = false, name, date; $('.form--group').each(function() { if (flag) return; name = $(this).find('.thename').val(); date = $(this).find('.date_of_birth').val(); date = date !== undefined && date.length == 10; flag = !name || !date; }); return flag } //Toggle disbaled class $('.form--group').on('keyup','input', function() { $('#stepbirth').toggleClass('disabled', formIsInvalid()); }); </script> </body> </html>
解決方案3
-2 2019-07-31 10:13:33
如果發現至少一個空白字段，則可以停用該按鈕。
就像是
var emptyFields = $('.form--group input:text').filter(function() { return this.value.length == 0; });
$(#button).toggleClass('disabled',emptyFields.length > 0);
jQuery檢查元素是否有類
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.