Question

以下是我的编码，用于验证textareas是空的还是包含5个字符或更少。

function validation() {

                var context = $('#optionAndAnswer');
    var currenttotal = context.find('.answerBtnsOn').length;    

    alertValidation= "";
        // Note, this is just so it's declared...

    var textAreaO = $(".textAreaQuestion");

    if (textAreaO.val() == ""){
        alertValidation += "\nYou have not entered a valid Question\n";
    } else if (textAreaO.val().length < 5){
        alertValidation += "\nYou have not entered a valid Question\n";
    }


    if(alertValidation != "")
    {
        alert(alertValidation);
        return false;
    }

     return true;
}

问题是，假设我有两个同一类（.textAreaQuestion）的textareas，然后如果两个textareas中的一个是空的或少于5个字符，那么没有验证（没有警报出现），这是它应该出现不正确。仅当两个textareas都为空或少于5个字符时才会出现。那么如何处理这些代码，以便如果有许多textareas中的textarea是空的或少于5个字符，那么显示警告？

由于

Answer 1

如果您的选择器与多个调用.val()的元素匹配，则只会返回匹配的第一个元素的值。如果要验证所有这些元素，则需要使用.each()函数迭代所有元素。

Answer 2

您需要使用each

来迭代.textAreaQuestion

var textAreaO = $(".textAreaQuestion");

textAreaO.each(function() {
  if ($(this).val() == ""){
    alertValidation += "\nYou have not entered a valid Question\n";
  } else if ($(this).val().length < 5){
    alertValidation += "\nYou have not entered a valid Question\n";
  }
});
//...

Answer 3

.val()方法返回第一个匹配元素的值：

描述：获取匹配元素集合中第一个元素的当前值。

您应该遍历匹配的元素以单独处理它们。像这样：

$(".textAreaQuestion").each(function() {
    if (!this.value || this.value.length < 5) {
        alertValidation += "\nYou have not entered a valid Question\n";
    }
});

<强> DEMO

如果一个textarea为空或少于5个字符，则不会显示警报

3 个答案: