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

您可以为所有需要的输入提供一个通用的 class（例如 required），然后使用 each() 循环遍历它们，例如：

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

          return false;
        }
    });
    return true;
}

Answer 2

Zakaria 已经发布了一个答案，应该很好用。或者，您可以找到所有具有属性 required 且 [=16] 的 input、textarea 和 select 元素，而不是自定义 class =] 使用

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 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" 属性，然后所有空的必需输入将具有伪 class :invalid.

jQuery('input:invalid') 为您提供所有无效输入的列表。 .length 将给出所述列表的长度，如果长度 > 0，则您的表单无效。

Answer 4

你可以试试这个假设表单有一个 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 5

您还可以利用可迭代函数 every()，它会 return 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;
   }
}

Answer 6

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

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

jQuery check if all required inputs from a form are not empty

javascript

jquery

attributes

required