Textarea边框检查输入

Question

目前我的代码检查在网站textareas输入。如果我将它们全部留空，当我按下按钮时，它们都会突出显示为红色，这是预期的。 但是，当我将文本输入到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

在本地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 
    } 
    }); 

Answer 2

我相信以下将是一个更好的解决方案：

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() === "") 

注意，这不得不您的索引没有关系通过阵列。它可能会像下面这样工作过：

这将所得元件的第i个条目，然后

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

检索到它的价值，但我相信jQuery.each()性能优越您的任务。

提供样品jsFiddle。