jQuery检查表单中所有必需的输入是否为空

Question

想象一下使用方法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中实现吗？

Answer 1

扎卡里亚已经发布了一个答案,这应该很有效.或者,而不是有一个自定义类,可以转而找到所有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.
}

Answer 2

您可以为所有必需的输入提供一个公共类(required例如),然后使用它each()来循环遍历它们:

function check_required_inputs() {
    $('.required').each(function(){
        if( $(this).val() == "" ){
          alert('Please fill all the fields');

          return false;
        }
    });
    return true;
}

Answer 3

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，则您的表单无效。