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元素，而不是使用自定义类。 / p>

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;
        }
    });
});

Answer 3

你可以试试这个假设表单具有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);
           }
     });
});

Answer 4

您还可以利用可迭代函数every()，只有在满足每个输入验证时才返回true，否则返回false：< / p>

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;
   }
}

Answer 5

我创建了此函数，该函数不仅检查该字段是否为空，还检查用户是否插入了一个或空格而没有将字符从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;

Answer 6

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')为您提供所有无效输入的列表。如果长度为＆gt; .length将为您提供所述列表的长度。 0，表格无效。

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

6 个答案: