Question

目前，我的代码会检查网站上textareas的输入。如果我将所有这些都留空，当我按下按钮时，它们都会突出显示为红色，这是预期的。但是，当我将文字输入一个或多个框时，它就会通过。

每次按下按钮都没有检查所有方框，如果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。

Answer 2

在原生javascript中

var inputarea = documen.getElementsByClassName('input');
for(var i = 0; i < inputarea.length; i++)
{
    if(inputarea[i].value === "")
    {
        console.log("Missing textarea input");
        success = false;
        inputarea[i].style.border='1px solid red';
         // or inputarea[i].style = 'border:1px solid red;';
    }
}

在Jquery中我认为这样可行

$('.input').each(function(i, item) {
      if ($(item).val() === "") {
         console.log("Missing textarea input");
         success = false;
         $(item).attr("style","border:1px solid red;");
         //note it will overwrite your element style in all Input class
      }else{
         $(item).removeAttr('style')
         // to remove border 
     }
   });

Textarea边界检查输入

2 个答案: