检查输入是否在每个类元素上都有值，然后切换禁用的类jQuery
[英]Check input has value on each class element then toggle disabled class jQuery
问题描述
I'm trying to check the values of each input element in my form. 
我正在尝试检查表单中每个输入元素的值。 It's not working. 没用 Can someone help me what I'm doing wrong here? 有人可以帮我在这里做错什么吗？ Thanks 谢谢
<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
You can use .trim() method to remove all free space at start of value. 您可以使用.trim()方法删除值开头的所有可用空间。 And check if value is exist. 并检查值是否存在。
LIVE EXAMPLE: https://codepen.io/miladfm/pen/ZgKqNm 实时示例： https ： //codepen.io/miladfm/pen/ZgKqNm
HTML 的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 的CSS
#stepbirth.disabled {
color: #999;
}
JS 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
Since there is no in-built disabled property for element 'a', you should create a style for that as mentioned below. 由于元素'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
You can deactivate the button if you find at least one empty field. 如果发现至少一个空白字段，则可以停用该按钮。
Something like 就像是
var emptyFields = $('.form--group input:text').filter(function() { return this.value.length == 0; });
$(#button).toggleClass('disabled',emptyFields.length > 0);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.