javascript - Textarea 边界检查输入

Question

目前我的代码检查网站文本区域中的输入。如果我将它们全部留空，当我按下按钮时，它们都会以红色突出显示，这是预期的。 但是，当我在 1 个或多个框中输入文本时，它只是通过了。

它不会在我每次按下按钮时检查所有框，如果 1 个框中有文本，它会验证提交。 js代码有什么问题？

$(window).load( function () {
  $('#form1').on('submit', function(event) {

    // If the form validation returns false, block the form from submitting by 
    // preventing the event's default behaviour from executing.
    if (!validate()) {
      event.preventDefault();
    }    
  });

  function validate() {       
    var success = true;

    // Verify that the user entered some special instructions (we only take special orders!)
    var inputarea = $('.input');

    for(var i = 0; i < inputarea.length; i++)
    {
        if(inputarea.val() === "")
        {
            console.log("Missing textarea input");
            success = false;
            //NEED TO CHANGE THE LINE BELOW SO IT WONT SHOW TEXT, JUST CHANGE BORDER COLOUR
            $('.input').css("border","1px solid red");
        }
    }
    return success;   
  }
});

http://jsfiddle.net/originalwill/5cw1a2c2/

该链接不会显示我的错误，因为它基于使用表单的按钮请求，因此它在 jsFiddle 中不起作用。

Answer 1

我相信以下会是更好的解决方案:

function validate() {
   var success = true;
   // Verify that the user entered some special instructions (we only take special orders!)
   $('.input').each(function(i, item) {
      if ($(item).val() === "") {
         console.log("Missing textarea input");
         success = false;
         //NEED TO CHANGE THE LINE BELOW SO IT WONT SHOW TEXT, JUST CHANGE BORDER COLOUR
         $(item).css("border","1px solid red");
      }
   });
   return success;   
}

在您的原始代码中，您有以下语句:

if (inputarea.val() === "")

请注意，这与您通过数组进行索引无关。它可能适用于以下内容:

if ($(inputarea.get(i)).val === "")

它会获得第 i 个条目的元素，然后检索它的值，但我相信 jQuery.each()函数对您的任务来说是优越的。

样本 jsFiddle提供。