验证仅在所有文本输入都为空时才起作用,而不是任何文本输入为空

时间:2012-12-20 18:32:44

标签: javascript html css

我想在警告中生成验证消息,以确定问题中的任何文本输入是否为空。例如,如果问题1有2个空白文本输入,如果两个文本输入都为空,则显示验证消息You have not entered in a value in all the Indivdiaul Marks textbox

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

我的问题是,如果每个问题有任何空白文本输入,我怎样才能显示验证消息?

这是一个小提琴,所以你可以测试它: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;
}

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

validation()函数无论发现什么都会返回true

您需要在此函数顶部声明一个名为errors或类似的变量,其值为false。对于找到错误的函数中的任何位置,请将errors的值设置为true

在功能结束时......

return !errors; // return the value of errors NOT'ed

然后在测试中调用validation(),就像这样......

if (validation()) {
    // everything is groovy
} else {
    // make them do the form over, or something
}