Javascript驗證亮點字段

Question

我正在爲我的表單創建一個簡單的JS驗證。我需要它在沒有填寫時突出顯示紅色的onblur，並且在你填寫之後填寫綠色。對不起，不允許在我的帖子中嵌入圖片：L 任何幫助表示感謝，謝謝。

這是HTML：

<form id="surveyForm"> 
Favourite movie? 
    <input type="text" id="favMov" onblur="return $formValidation()"/> 
    <span id="errorStyle"></span> 
</form> 

這是JS：

function $formValidation(elem) { 

     //gather the calling elements value 
     var val = document.getElementById(elem.id).value; 
     //Just for testing - alert(val.length); 
     //if the length value of the text field is blank - show error 
     if (val == "") { 
      document.getElementById("errorStyle").style.borderColor = "red"; 
      return false 
     } else { 
      //if they are not blank remove error text 
      document.getElementById("errorStyle").style.borderColor = "green"; 

     } 
    } 

您可以在這裏找到一個小提琴樣本：

http://jsfiddle.net/a45gn9w4/

Answer 1

你要聽提交表單並調用函數formValidation（）

然後，您可以實際獲取這些元素並驗證它是否正確。

這是HTML：

<form id="surveyForm" method="post" action="some_url_to_post"> 
    <label id="">Favourite movie?<span id="error" class="noErrorHappen">*</span></label> 
    <input type="text" id="favMov" name="favMov"> 
    <br/> 
    <input type="submit" id="validator" value="Submit"> 
</form> 

這是JS：

var error = document.getElementById("error"); 

var form = document.forms.surveyForm, 
    elem = form.elements; 


function formValidation() { 
    if(!elem.favMov.value){ 
     alert('please input text.'); 
     elem.favMov.focus(); 
     error.className = "errorHappen"; 
     return false; 
    } else { 
     error.className = "noErrorHappen"; 
     return true; 
    } 
} 



form.onsubmit = formValidation; 

這是CSS：

.errorHappen { 
    display: block; 
    color: red; 
} 
.noErrorHappen { 
    display: none; 
} 
#error { 
    float: left; 
}