javascript - 验证仅在所有文本输入均为空白时有效，而不是任何文本输入为空白

Question

当问题中的任何文本输入为空时，我想在警报中生成一条验证消息。因此，例如，如果我有 2 个空白文本输入问题 1，如果两个文本输入都是空白，它会显示验证消息 You have not entered in a value in all the Indivdiaul Marks textbox。

但问题是，例如对于问题 1，如果 1 个文本输入为空而另一个不为空，则它不会显示验证消息，即使它应该这样做，因为并非所有文本输入都已为问题填写1.

我的问题是，如果每个问题都有空白文本输入，我如何才能显示验证消息？

这是一个 fiddle ，您可以对其进行测试:http://jsfiddle.net/cbyJD/87/

下面是validation()函数代码:

function validation() {

    // only keeping track of the final message
    var alertValidation = "",
        // toggle for showing only one error
        showOnlyOneError = true;

    $("input[data-type='qmark']").each(function(i) {  
        var questions = $(this).attr("data-qnum");
        var marks = parseInt($("[class*=q" + (i+1) + "_ans_text]").text()); 
        var txtinput = $(this).val(); 

        // the message for this question
        var msg = '';

        if (txtinput == '') {
            msg += "\n\u2022 You have not entered in a value in all the Indivdiaul Marks textbox \n";
        }

        if (marks < 0) {
            msg += "\n\u2022 Your Total Marks Remaining does not equal 0 \n - You Need To Remove " + Math.abs(marks) +  " Marks";   
        } else if (marks > 0) {
            msg += "\n\u2022 Your Total Marks Remaining does not equal 0 \n - You Have " + marks +  " Marks Remaining";   
        }

        // if there is an error for the question, add it to the main message
        if (msg.length) {
            alertValidation += alertValidation.length ? '\n\n' : '';
            alertValidation += "You have errors on Question Number: " + questions + "\n";
            alertValidation += msg;
            // stop if we only care about the first error
            return !showOnlyOneError;
        }
    });

    // show the error messages
    if (alertValidation != "") {
        alert(alertValidation);
        return false;
    }

    return true;
}

Answer 1

首先，添加一个包含组总数的隐藏变量num_groups。

<p>
  <input type='hidden' id='num_groups' name='num_groups' value='2'>
  <input id="submitBtn" name="submitMarks" type="submit" value="Submit Marks" />
</p>

其次，更改 validate 函数以处理一组问题:

function validation(group) {
  var msg = [];

  var nb = 0;     // Number of blank values
  $("input[data-qnum='" + group + "']").each(function() {
    if ($(this).val() == '') {
      nb++;
      return false;
    }
  });
  if (nb != 0) {
    msg.push("\u2022 You have not entered in a value in all the Individual Marks textbox");
  }

  var marks = parseInt($("[class*=q" + group + "_ans_text]").text()); 
  if (marks != 0) {
    msg.push("\u2022 Your Total Marks Remaining does not equal 0");
    if (marks < 0) {
      msg.push("- You Need To Remove " + -marks + " Marks");
    } else if (marks > 0) {
      msg.push("- You Have " + marks + " Marks Remaining");
    }
  }

  if (msg.length > 0) {
    alert("You have errors on Question Number: " + group + "\n\n" + msg.join("\n"));
    return false;
  } else {
    return true;
  }
}

第三，更改myClickhandler 函数以验证所有组:

myClickHandler = function(e) {
  var ng = $('#num_groups').val();
  for (var group = 1; group <= ng; group++) {
    if (!validation(group)) return false;
  }
  if (confirm("Are you sure you want to Proceed?")) {
    $.ajax({
      url: "insertmarks.php",
      data: $("#markstbl").serialize(),
      async: false,
      type: "POST"
    });
    return true;
  } else {
    return false;
  }
}

JsFiddle here .