带有警报弹出窗口的 JQuery 表单验证 - 警报仍然显示为有效提交答案

【问题标题】：JQuery form validation with alert popup - alert still being shown with a valid submit带有警报弹出窗口的 JQuery 表单验证 - 警报仍然显示为有效提交
【发布时间】：2012-03-10 16:01:56
【问题描述】：

我正在使用 Jquery 验证功能进行表单验证。到目前为止，我一直将错误消息附加到页面元素，但我现在想在警报弹出窗口中显示它。当用户没有选择任何东西时，警报弹出窗口成功显示错误消息，但是当他们提交有效表单时弹出仍然出现（这次没有错误消息）。

如何在有效的表单提交后阻止弹出窗口出现？

这是我的 js 代码，我已经实现了单选按钮的警报。您可以在 http://hiplogger.hip-zone.co.za/partner/mobile 上看到这一点

$("#quickieform").validate({
    rules: {
        answer: "required"
    },
    answer: {
        answer: "Please make a selection"
    },
    errorPlacement: function(error, element) {
        if ( element.is(":radio") )
            alert(error.html());

        else if ( element.is(":checkbox") )
            error.appendTo( ("#alertbox") );

        else
            error.appendTo( ("#alertbox") );
    },
    submitHandler: function(form) {
        // do other stuff for a valid form
        form.submit();
    },
    success: function(label) {
        // set   as text for IE
        label.html(" ").addClass("checked");
    }
});

【问题讨论】：

标签： jquery validation jquery-mobile popup alert

【解决方案1】：

感谢您的回复。我让它工作了，但我不知道它为什么工作。我所做的只是在最后取出“成功：”部分，所以我的代码最终看起来像这样......

$("#quickieform").validate({
    rules: {
            answer: "required"
        },
    invalidHandler: function(form, validator) {

    },
    errorPlacement: function(error, element) {
        if ( element.is(":radio") && error.html != "")
           // error.appendTo( ("#alertbox") );
            alert(error.html());

        else if ( element.is(":checkbox") )
           // error.appendTo( ("#alertbox") );
        alert(error.html());

        else
            error.appendTo( ("#alertbox") );
    },
    submitHandler: function(form) {
            form.submit();
    }

 })

【讨论】：

【解决方案2】：

无论实际错误如何，errorPlacement 都会运行。可能是这种情况，因为当您运行 $("#quickieform").valid() 时，它会运行验证 - 触发警报然后返回 true。我没有在警报中看到实际的错误消息。您可能希望将其移至 invalidHandler 函数：

$("#quickieform").validate({
    rules: ...
    answer: ...
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        alert("You have " + error + " errors that need to be fixed");
      }
    }
    ...
 })

或者只是修改你的errorPlacement来检查error.html != ""

if ( element.is(":radio") && error.html != "")

希望这会有所帮助！

【讨论】：