Question

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

Answer 1

您应该在return false;之前加一行：

e.preventDefault();

这将停止提交表单。

另请注意：return false将停止each循环，但不会向submit事件返回false。

Answer 2

您将返回false为each函数，而不是提交函数。

返回true each使其循环到列表中的下一个项目，返回false使其停止循环（如continue和break）。

与其他人一样，使用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();
    }
  });
});

您可能还想看看HTML5的required属性，虽然目前尚未广泛使用，但这是一个有趣的读物：http://john.foliot.ca/required-inputs/

Answer 3

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

不是为每个必填字段返回false，而是将返回值存储在变量中。如果为false，则希望e.preventDefault()阻止表单提交

使用jQuery进行快速表单验证

3 个答案: