I used the model dialog box, In that form I want to use the jquery form validation. code for Jquery form validation with modal dialog box with custom messages.
Jquery form validation with modal dialog box with custom messages
I used the following HTML code:
<form id="form1" name="form1"> Field 1: <input id="field1" type="text" class="required" /> </form> <div> <input id="btn" type="button" value="Validate" /> </div> <div> <input id="dialogbtn" type="button" value="Open Dialog" /> </div> <div id="dialog-form" title="Create new user"> <form id="form2"> <label for="name">Name</label> <input type="text" name="name" id="name" required="true" /> <br/> <label for="email">Email</label> <input type="text" name="email" id="email" required="true" email="true"/> <br/> <label for="password">Password</label> <input type="password" name="password" id="password"/> </form> </div>
following is the javascript code:
$(function() {
//simple example 1
//click event for first button
$('#btn').click(function() {
$("#form1").valid(); //validate form 1
});
//example to validate inside a dialog box
//dialogopen button click event
$('#dialogbtn').click(function() {
$( "#dialog-form" ).dialog( "open" );
});
//code for dialog
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Save": function() { //on click of save button of dialog
if($('#form2').valid()){ //call valid for form2 and show the errors
//alert('submit form'); //only if the form is valid submit the form
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
After this i wanted to added the custom error messages.
I used the following code:
jQuery(function ($) {
$("#form2").validate({
errorLabelContainer: '#errors',
messages: {
email: {
required: "Please enter an email address",
email: "Please enter a valid email address"
},
name: {
required: "Please enter your name"
}
},
submitHandler: function () {
return false;
}
});
});