使用jQuery进行快速表单验证

我正在编写一个在线申请表，需要非常基本的验证。 我在HTML中通过向每个字段添加类requiredField来表示必填字段。脚本检查每个必填字段，如果为空，则在向错误井添加消息时返回false

我有问题。。。当任何字段为空时，脚本会正确添加错误消息，但如果字段已填写，则脚本会拒绝发送消息。有谁能帮助我理解为什么我的“其他”条件下的“返回真”没有通过？任何帮助都将不胜感激

谢谢

以下是我的验证脚本：

<script type="text/javascript">
    jQuery('#contactForm').submit(function(e) {
        jQuery( ".requiredField" ).each(function( index ) {
            if( jQuery(this).val().length == 0 ) {
                jQuery("#formErrors").show();
                jQuery( "#formErrors" ).append( "<p>The <b>" + jQuery(this).attr('placeholder') + "</b> field is required, but was left empty.</p>" );
                jQuery(this).addClass('errorField');
                jQuery(window).scrollTop(0);
                                    return false;
            }
            else{
                return true;
            };
        });
      });
    });
</script>

jQuery（“#contactForm”）.submit（函数（e）{
jQuery（“.requiredField”）。每个（函数（索引）{
if（jQuery（this）.val（）.length==0）{
jQuery（“#formErrors”）.show（）；
jQuery（“#formErrors”）.append（需要“+jQuery（this）.attr（'placeholder'）+”字段，但保留为空。
”；
jQuery（this.addClass（'errorField'）；
jQuery（窗口）.scrollTop（0）；
返回false；
}
否则{
返回true；
};
});
});
});

您应该在返回false之前包含一行：

e.preventDefault();

这将阻止表单的提交

---

另请注意：

返回false

将停止

每个

循环，但它不会向

提交

事件返回false。

您正在向

每个

函数返回false，而不是向提交函数返回false

将true返回到

每个

将使其循环到列表中的下一项，返回false将使其停止循环（如

继续

和

中断

）

正如其他人所说，使用

e.preventDefault（）

作为

submit

函数的第一行，如果一切都正确，则手动提交表单

我会这样重写代码：

jQuery('#contactForm').submit(function(e) {
    e.preventDefault();
    var goodToGo = true;
    jQuery( ".requiredField" ).each(function( index ) {
        if( jQuery(this).val().length == 0 ) {
            jQuery("#formErrors").show();
            jQuery( "#formErrors" ).append( "<p>The <b>" + jQuery(this).attr('placeholder') + "</b> field is required, but was left empty.</p>" );
            jQuery(this).addClass('errorField');
            jQuery(window).scrollTop(0);
            goodToGo = false;
        };
    });
    if (goodToGo) {
        jQuery('#contactForm').submit();
    }
  });
});

jQuery（'#contactForm'）。提交（函数（e）{
e、 预防默认值（）；
var goodogo=真；
jQuery（“.requiredField”）。每个（函数（索引）{
if（jQuery（this）.val（）.length==0）{
jQuery（“#formErrors”）.show（）；
jQuery（“#formErrors”）.append（需要“+jQuery（this）.attr（'placeholder'）+”字段，但保留为空。
”；
jQuery（this.addClass（'errorField'）；
jQuery（窗口）.scrollTop（0）；
goodogo=假；
};
});
国际单项体育联合会（多哥）{
jQuery（“#contactForm”）.submit（）；
}
});
});

您可能还想看看HTML5的

required

属性，虽然它还没有被广泛使用，但读起来很有趣：

jQuery（“#contactForm”）.submit（函数（e）{
var返回值=真；
jQuery（“.requiredField”）。每个（函数（索引）{
if（jQuery（this）.val（）.length==0）{
jQuery（“#formErrors”）.show（）；
jQuery（“#formErrors”）.append（需要“+jQuery（this）.attr（'placeholder'）+”字段，但保留为空。
”；
jQuery（this.addClass（'errorField'）；
jQuery（窗口）.scrollTop（0）；
returnValue=false；
}
if（！returnValue）{
e、 预防默认值（）；
}
返回值；
});
});

---

将返回值存储在变量中，而不是为每个必填字段返回false。如果为false，则希望使用

e.preventDefault（）

阻止表单提交

应添加e.preventDefault（）以阻止表单提交

jQuery('#contactForm').submit(function (e) {
    var returnValue = true;

    jQuery(".requiredField").each(function (index) {
        if (jQuery(this).val().length == 0) {
            jQuery("#formErrors").show();
            jQuery("#formErrors").append("<p>The <b>" + jQuery(this).attr('placeholder') + "</b> field is required, but was left empty.</p>");
            jQuery(this).addClass('errorField');
            jQuery(window).scrollTop(0);

            returnValue = false;
        }
        if (!returnValue) {
            e.preventDefault();
        }
        return returnValue;
    });
});