Question

在我的表单中，我使用jquery添加了一些验证。验证后，我需要在模态弹出窗口中显示成功消息。我的编码如下：

  $("#validateForm").validate(
            {
                debug: false,
                rules: 
                {
            firstname: {
                required: true,
                lettersonly: true
            },
            lastname: {
                required: true,
                lettersonly: true
            },
            contactmail: {
                required: true,
                maxlength: 50,
                email: true
            },
            username: {
                required: true,
                maxlength: 10
            },
            password: {
                required: true,
                minlength: 5
            },
            repassword: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            }


        },
        messages: {
            firstname: {
                required: "Please enter your firstname"
            },
            lastname: {
                required: "Please enter your lastname"
            },
            //contactmail: "Please enter a valid email address",
            contactmail: {
                required: "Please enter email address",
                email: "Email must be in the format of name@domain.com"
            },
            username: {
                required: "Please enter a username"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            repassword: {
                required: "Please provide a retype password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            }

                },

            });

下面是我试过的弹出窗口的代码：

   1. $('#successmsg').dialog();

    2.  $.validator.setDefaults({

          submitHandler: function() {

         alert("Form completed!"); 
         $('#successmsg').dialog('open');


    3. $("#dialog-modal").dialog(
    {
    width: 600,
    height: 400,
    open: function(event, ui)
    {
        var textarea = $('<textarea style="height: 276px;">');
        $(textarea).redactor({
            focus: true,
            maxHeight: 300,
            initCallback: function()
            {
                this.code.set('<p>Lorem...</p>');
            }
        });
    }
 });

    }
});

我刚尝试了三种方法，但我失败了。仅显示警报消息，我不想要警报，我需要弹出消息。我已经使用了模式弹出窗口用于其他页面。但在此页面中，需要验证+成功消息弹出窗口。

表单id：validateForm

模态内容div id：successmsg

Answer 1

   Use submitHandler function in validate() as i shown in below code :

   $("#validateForm").validate(
    {
        debug: false,
        rules: 
        {
    firstname: {
        required: true,
        lettersonly: true
    },
    lastname: {
        required: true,
        lettersonly: true
    },
    contactmail: {
        required: true,
        maxlength: 50,
        email: true
    },
    username: {
        required: true,
        maxlength: 10
    },
    password: {
        required: true,
        minlength: 5
    },
    repassword: {
        required: true,
        minlength: 5,
        equalTo: "#password"
    }


},
messages: {
    firstname: {
        required: "Please enter your firstname"
    },
    lastname: {
        required: "Please enter your lastname"
    },
    //contactmail: "Please enter a valid email address",
    contactmail: {
        required: "Please enter email address",
        email: "Email must be in the format of name@domain.com"
    },
    username: {
        required: "Please enter a username"
    },
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    repassword: {
        required: "Please provide a retype password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
    }

        },
     submitHandler : function(){
           $.ajax{(
              url : /* action property value of form */
              data : $('#validateForm').serialize(),
              type : "post",
              success : function(n)
              {
                   if ( n ) // action done
                   {
                      $('#successmsg').parents('.modal').modal('show');
                   }
              }
           )}
     }

    });

模态弹出窗口上的Jquery验证和成功消息

1 个答案: