Jquery form validation with modal dialog box with custom messages

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;
}
});
});