Form Validation
How to validate a form using Jquery
Write the below code :
<form action="" id="frmEnquiry" method="post" novalidate="novalidate">
<p class="your-para">Your Name :</p>
<input type="text" name="Name" id="Name" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
<p class="your-para">Your Mail :</p>
<input type="text" name="Email" id="Email" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
<p class="your-para">Subject :</p>
<input type="text" name="Subject" id="Subject" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
<p class="your-para">Phone Number :</p>
<input type="text" name="Phone" id="Phone" value="" onfocus="this.value='';" onblur="if (this.value == '') {this.value ='';}">
<p class="your-para">Your Message :</p>
<textarea cols="77" rows="6" name="Message" id="Message" onfocus="this.value='';" onblur="if (this.value == '') {this.value = '';}"></textarea>
<ul class="actions">
<li><input type="submit" class="style1" value="Send" onclick="Submit(this);" /></li>
<li><input type="reset" class="style2" value="Reset" /></li>
</ul>
</form>
<script type="text/javascript">
var formElement = $('#frmEnquiry');
$(document).ready(function () {
debugger;
InitializeValidation();
});
function InitializeValidation() {
debugger;
$("#frmEnquiry").validate({
// Rules for
form validation
errorElement: "div",
//highlight:
function (element) {
//
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
//},
//success:
function (element) {
//
element.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success');
//},
rules:
{
Name: {
required: true,
},
Subject: {
required: true,
},
Phone: {
required: true,
},
Email: {
required: true,
email: true
},
Message: {
required: true
}
},
// Messages for
form validation
messages:
{
Name: {
required: 'Please Enter Name',
},
Subject: {
required: 'Please Enter Subject',
},
Phone: {
required: 'Please Enter Phone',
},
Email:
{
required: 'Please Enter Your Email Address',
email: 'Please Enter a valid email address'
},
Message: {
required: 'Please Enter Message'
}
},
// Do not
change code below
errorPlacement: function (error, element) {
debugger;
error.appendTo(element.parent());
error.append("<br/>");
}
});
}
function Submit(e) {
debugger;
if (formElement.valid()) {
debugger;
var pInquiry = {
Name: $("#Name").val(),
Email: $("#Email").val(),
Phone: $("#Phone").val(),
Subject: $("#Subject").val(),
Message: $("#Message").val()
}
ShowPortletLoader("#divEnquiryContainer");
var actionUrl = _contentRoot + "Home/AddContactUs";
$.ajax({
url: actionUrl,
data: pInquiry,
success: function (response) {
if (response == "SUCCESS") {
$("#divMessageContainer").removeClass('hide');
$("#lblMessageType").html("Success !");
$("#lblMessage").html(" Inquiry saved successfully, we'll contact you soon.");
}
else {
$("#divMessageContainer").removeClass('hide');
$("#lblMessageType").html("Error !");
$("#lblMessage").html("Unable to save inquiry.");
}
HidePortletLoader("#divEnquiryContainer");
SetDefault();
},
error: function (response) {
HidePortletLoader("#divEnquiryContainer");
}
});
}
}
</script>
Output
Comments
Post a Comment