Question

请帮我使用JQuery执行以下操作。

条件1：如何检查启用的所有字段（输入，文本区域，选择）是否为空或具有选定值。

条件2：禁用的字段不包含在条件1的验证中。

我已经尝试了很多代码，下面的代码似乎也可以，但它会捕获所有字段，包括那些禁用的字段。

$('#btnSave').click(function (e) {
    $('input:enabled:not([readonly])').each(function () {
        if ($(this).val() == "")
        {
            alert("Please fill out all fields.");
            e.preventDefault();
            return false;
        }
        else
        {
            addSomeStuffs();
        }
    });
 });

任何人都可以帮助我。

提前致谢。

Answer 1

使用Jquery表单验证将帮助您实现您的要求

https://jqueryvalidation.org/

希望这有帮助

Answer 2

您的选择器没有问题，您的逻辑几乎正确。原始代码出了什么问题，只要在空输入之前遇到非空输入，就会执行addSomeStuffs()。

您想要做的是：

设置一个标志，我们称之为invalid。只要一个或多个字段为空，它就会设置为false
迭代输入元素。如果其中一个为空，请设置invalid = true并退出循环（因为我们不需要再进一步，因为表单已经无效，没有任何内容可以改变）
循环后，评估invalid布尔值。如果它为假（即所有字段都有效），则我们调用addMoreStuff()

请参阅下面的概念验证示例：

$(function() {
  $('#btnSave').click(function(e) {
  
    // Invalid flag
    var invalid = false;

    // Iterate through all inputs
    $('input:enabled:not([readonly])').each(function() {
    
      // As long as one field is empty, we exit the loop and change invalid to true
      if ($(this).val() === "") {
        invalid = true;
        console.log('One or more fields are empty');
        console.log('First encountered invalid field: ', this);
        return false;
      }
      
    });
    
    // Evaluate invalid flag after iteration
    if (!invalid)
      addSomeStuffs();
  });
  
  var addSomeStuffs = function() {
    console.log('Validation passed');
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>Text input: <input type="text" placeholder="Text" /></label><br />
  <label>Text input: <input type="text" placeholder="Text" /></label><br />
  <label>Disabled text input: <input type="text" placeholder="Text" disabled /></label>
  <label>Select: <select><option>---Choose an option below---</option><option value="1">1</option><option value="2">2</option></select></label>
  <button type="button" id="btnSave">Save</button>
</form>

Answer 3

$('#btnSave').click(function (e) {
 var empty = false;
 $('form > input').each(function () {
    if ($(this).val() == '') {
        empty = true;
    }
 });

 if (empty) {
    alert("Please fill out all fields.");
    e.preventDefault();
    return false;
 } else {
    addSomeStuffs();
 }
});

Answer 4

你的代码没有错。您错过了[type=text]中的input属性，仅验证text field。如果您想要return false;空count。

，也请删除fields

$('#btnSave').click(function (e) {
    $('input[type=text]:enabled:not([readonly])').each(function() {
        if ($(this).val() == "")
        {
            alert("Please fill out all fields.");
            e.preventDefault();
            return false;
        }
        else
        {
            addSomeStuffs();
        }
    });
 });

DEMO

所有已启用的文件都不为空时的Jquery验证

4 个答案: