0

我正在编写一个需要非常基本验证的在线申请表。我通过向每个字段添加类 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>
4

3 回答 3

2

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

e.preventDefault();

这将阻止表单提交。

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

于 2013-09-12T13:50:12.340 回答
0

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

返回 trueeach使其循环到列表中的下一项，返回 false 使其停止循环（如continueand 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/

于 2013-09-12T13:50:26.570 回答
0 
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()阻止表单提交

于 2013-09-12T13:55:57.443 回答