未在javascript中验证表单

我试图通过链接一个JS文件来验证用户的输入。但是，当我单击带有错误数据的submit按钮时，表单被提交，并且没有给出验证错误

表格：

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


}

函数validateForm（）{
/*验证表单的“名字”字段*/
var fn=document.forms['contactForm'].first_name.value；
/*如果名称字符串为空，则返回false并显示警告*/
如果（fn==“”）{
警告（“必须填写姓名”）；
document.forms['contactForm'].first_name.reset（）；
返回false；
}否则，如果（fn.length您可以在表单中使用普通按钮并使用javascript函数提交表单。
请检查此结果：
您可以使用更多输入和GET进行表单验证

另请参阅Jquery参考资料，了解如何构建

或者只使用插件验证：

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

$(document).ready(function(){
    $("#commentForm").validate();
  });


$（文档）.ready（函数（）{
$（“#commentForm”）.validate（）；
});
我不确定是否可以对元素调用reset（）。我认为您可以对表单对象使用该方法来清除所有字段。IE和FF似乎没有问题，但Chrome似乎有问题。因此，Chrome不会执行javascript并始终提交表单。以下是fiddle和更新的代码：

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
        }

函数validateForm（）{
/*验证表单的“名字”字段*/
var fn=document.forms['contactForm'].first_name.value.trim（）；
/*如果名称字符串为空，则返回false并显示警告*/
如果（fn==“”）{
警告（“必须填写姓名”）；
document.forms['contactForm'].first_name.value=''；//已删除重置
返回false；
}否则如果（fn.length op没有使用JQueryEvent当我将按钮更改为HTML按钮元素时，表单在未验证的情况下提交。是否删除了提交类型？是的，我有这样的按钮：提交我会尝试将表单标记设置为返回false，并让按钮运行表单提交，否则我暂时退出。我想是的vascript还有一个名为preventdefault的本机函数。您好，谢谢您的回答。当我使用包含三个空格字符的first_name输入框提交表单时，表单将被提交。在URI中，它包含：contact.html？first_name=+++。我认为“+”代表空格字符，它们将被计算为实际字符，因为e他们将空格转换为“+”。这可能吗？您可以使用trim（）。请参阅更新。但请注意，IE 8及以下版本不支持trim（）。但是，您可以扩展原型，在不支持的浏览器中实现自己的trim函数。是的，trim（）起作用了。感谢与IE 8的兼容性问题。