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

时间:2012-03-10 16:01:57

标签: jquery validation jquery-mobile popup alert

我正在使用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");
    }
});

2 个答案:

答案 0 :(得分: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();
    }

 })

答案 1 :(得分:0)

无论实际错误如何,都可以运行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 != "")

希望这有帮助!