我试图通过链接JS文件验证用户的输入来验证输入。但是,当我单击带有错误数据的提交按钮时,表单将被提交,并且不会给出验证错误。
表格:
<form id="user_form" name="contactForm" action="#" method="GET" onsubmit="return validateForm();">
<p id="first_name" class="input_title">First name <span class="asterisk_red">*</span></p>
<!-- The HTML 5 'Required' attribute will not allow the form to be sent empty. -->
<input class="input_box" type="text" name="first_name" placeholder="Joe" />
<input id="submit_button" type="submit" name="submit" value="Submit"/>
</form>
我使用的JS验证:
function validateForm(){
/* Validate the first name field of the form */
var fn = document.forms['contactForm'].first_name.value;
/* If the Name string is empty then return false and show warning. */
if (fn == ""){
alert("First name must be filled out");
document.forms['contactForm'].first_name.reset();
return false;
}else if(fn.length <= 2){
alert("Your first name must more than two characters");
document.forms['contactForm'].first_name.reset();
return false;
}
}
答案 0 :(得分:1)
我不确定你是否可以在一个元素上调用reset()。我认为你在表单对象上使用该方法来清除所有字段。 IE和FF似乎没有问题,但Chrome似乎。因此,chrome不会执行javascript并始终提交表单。这是小提琴Form Submit和更新后的代码:
function validateForm() {
/* Validate the first name field of the form */
var fn = document.forms['contactForm'].first_name.value.trim();
/* If the Name string is empty then return false and show warning. */
if (fn == "") {
alert("First name must be filled out");
document.forms['contactForm'].first_name.value = '';//Removed reset
return false;
} else if (fn.length <= 2) {
alert("Your first name must more than two characters");
document.forms['contactForm'].first_name.value = '';//Removed reset
return false;
}
return true;//Added
}
答案 1 :(得分:0)
请检查此结果:Form Validation jsFiddle 你有更多的输入和GET表单验证。
另请参阅Jquery有关如何构建jQuery Validation
的参考资料或者只是使用插件验证:
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
$(document).ready(function(){
$("#commentForm").validate();
});
答案 2 :(得分:-1)
您只需在表单中使用普通按钮,然后使用javascript函数提交表单。