[英]jQuery check if all required inputs from a form are not empty
想象一下使用方法POST
和30个输入的简单表单。
我想创建一个将从提交按钮调用的jQuery函数。 我搜索了如何检查所需的所有输入,但没有找到任何帮助。
我想要这样的东西:
var inputs_required = all inputs from my form which have attribute required;
function check_required_inputs() {
if(inputs_required != "") {
//create ajax with serialize() and submit form;
}
} else {
//highlight inputs that are empty and show a message;
}
这可以在jQuery中实现吗?
扎卡里亚已经发布了一个答案,这应该很有效。 或者,而不是有一个自定义类,你可以找到,而不是所有的input
, textarea
,并select
有属性的元素required
,并visible
使用
var required = $('input,textarea,select').filter('[required]:visible');
然后使用each()
等迭代它们。
例:
var allRequired = true;
required.each(function(){
if($(this).val() == ''){
allRequired = false;
}
});
if(!allRequired){
//DO SOMETHING HERE... POPUP AN ERROR MESSAGE, ALERT , ETC.
}
您可以为所有必需的输入提供一个公共类(例如required
),然后使用each()
循环遍历它们,如:
function check_required_inputs() {
$('.required').each(function(){
if( $(this).val() == "" ){
alert('Please fill all the fields';
return false;
}
});
});
jQuery('button').on('click', function() { jQuery('input:invalid').css('background-color','red'); jQuery('input:valid').css('background-color','green'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="text" required="true" /> </form> <button>click</button>
您只需为输入required="true"
属性,然后所有空的必需输入将具有伪类:invalid
。
jQuery('input:invalid')
为您提供所有无效输入的列表。 .length
将给出所述列表的长度,如果长度> 0,则表单无效。
您可以尝试这个假设表单具有表单操作ID
并提交ID
表单提交按钮。
var submitButton = $('#form-submit'),
formContainer = $('#form-action');
submitButton.on('click',function(e){
e.preventDefault();
formContainer.find('input').each(function(index,ele){
if(ele.value === null || ele.value === ''){
var error = " the " + ele.name + " field is requird ";
ele.after(error);
}
});
});
您还可以利用iterable函数every() ,只有在满足每个输入验证时才返回true
,否则返回false
:
function check_required_inputs() {
var valid = Array.prototype.every.call($('.required'), function(input) {
return input.value;
});
if (valid) {
return true;
} else {
alert('Please fill all the fields');
return false;
}
}
我创建了这个函数,它不仅检查字段是否为空,而且如果用户插入了一个或空格而没有从a到b或其他地方放置字符
function checkfield (champ)
{
var off='', isit=false;
for (var j=0; j <champ.val ().trim ().split (' ').length;j++)
{
off+=champ.val ().split (' ')[j];
}
off.replace (' ', '');
if (off.length==0) isit=true;
return isit;
}
使用:
例
if (checkfield ($('.class_of_field'))==true) return;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.