[英]Jquery validation and success message on modal popup
在我的表单中,我使用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>');
}
});
}
});
}
});
我只是尝试了三种方法,但我失败了。 仅显示警报消息,我不希望警报,我需要弹出消息。我在其他页面使用了模式弹出。 但在此页面中,需要验证+成功消息弹出窗口。
表格编号:validateForm
模态内容div ID:successmsg
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');
}
}
)}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.