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。