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; 
}