JavaScriptフォームの検証でアラートが表示されない、または入力背景の色が変化する

Question

フォームを検証するためにこのスクリプトを作成しましたが、テキストフィールドを空白のままにしても、入力ボックスや警告メッセージの赤い背景はありませんさあ。ここで

function validateForm() 
{ 
/* For all forms in the document */ 
for(var i in document.forms) 
{ 
    /* Get the forms inputs */ 
    var inputs = document.forms[i].getElementsByTagName("input"); 

    for(var j in inputs) 
    { 
     /* Make sure we don't try to validate the submit button */ 
     if(inputs[j].type == "text") 
     { 
      if(inputs[j].value.trim() == "" || inputs[j].value.trim() == null) 
      { 
       inputs[j].style.backgroundColor = "red"; 
       alert("Please ensure all boxes are filled in"); 
       return false; 
      } 
     } 
    } 
} 
} 

ことができますならば、私のいずれかの形式である：私もスペースを許可しないことをお勧めプレースホルダーテキスト

<input type="text" name="artists" placeholder="Search Artists"... 

別の問題のため

<form name="searchArtists" method="get" onsubmit="return validateForm()"> 
    <input type="text" name="artists" placeholder="Search Artists" maxlength="255" size="32" /> 
    <input type="submit" name="submit" value="Search"/> 
</form> 

Answer 1

使用placeholder属性を

if(inputs[j].value.trim() == "") { ... 

Answer 2

あなたのコードiはフォームであり、jは入力です。そのため、document.forms[i]とinputs[j]は機能しません。

固定JavaScript関数：

function validateForm() 
{ 
    /* For all forms in the document */ 
    for(var i in document.forms) 
    { 
     /* Get the forms inputs */ 
     var inputs = i.getElementsByTagName("input"); 

     for(var j in inputs) 
     { 
      /* Make sure we don't try to validate the submit button */ 
      /* Trim value to not allow values with only spaces */ 
      if(j.type == "text") 
      { 
       if(j.value == null || j.value.trim() == "") 
       { 
        j.style.backgroundColor = "red"; 
        alert("Please ensure all boxes are filled in"); 
        return false; 
       } 
      } 
     } 
    } 
} 

HTML：

<form name="searchArtists" method="get" onsubmit="return validateForm()"> 
    <input type="text" name="artists" placeholder="Search Artists" maxlength="255" size="32" /> 
    <button type="submit">Search</button> 
</form> 

Answer 3

は、私はまた、あなたの現在の変更提案、まずは私たちが検証する要素にIDを追加し、少しこれを削減しましょう」 、そのような "プレースホルダ「を" 値：JavaScriptに今の

<input id="artistQueryInput" type="text" name="artists" placeholder="Search Artists" maxlength="255" size="32" /> 

：

function validateForm(){ 
    //Get element 
    var inputElement = document.getElementById('artistQueryInput'); 

    //Get value 
    var rawArtistQueryString = inputElement.value; 

    //Strip all whitespace 
    var baseArtistQueryString = rawArtistQueryString.replace(/ /g, ""); 

    //Validate string without whitespace 
    if((baseArtistQueryString == '') || (baseArtistQueryString == NULL) ||){ 
     //Assuming j is artistQueryInput 
     inputElement.style.backgroundColor = "red"; 
     alert("Please ensure all boxes are filled in"); 
     return false; 
    } 
}