The Default Jquery Email Validation is accordance to the RFC 5321. This Validation lack some of the validation like say if user type “test@te” in the email address field , Jquery will not throw error.
To overcome this issue, Custom Jquery validation method can be added in the jquery function as show below. In addition to the email validation this code also have yes and no choice.
If user choose the yes option, then email text will display and validation will fire otherwise Email fields is not display to the user
<!-- jQuery Form Validation code -->
<script>
$(function() {
$.validator.addMethod("emailValidation", function(value, element) {
return this.optional(element) || /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/i.test(value);
}, "Email validation.");
$("#formName").validate({
errorElement:'div',
rules: {
email:
{
required:"#emailChoice1:checked",
emailValidation: true
},
emailConfirmation:
{
required:"#emailChoice1:checked",
equalTo: "#email"
},
emailChoice: "required",
intials: "required"
},
messages: {
email:
{
required: "Email required.",
emailValidation: "Enter valid email."
},
emailConfirmation: {
required: "Email required.",
equalTo: "Email does not match."
},
emailChoice: "Selection required.",
intials: "Initials required."
},
submitHandler: function(form) {
$("#submitButton").prop("disabled",true);
form.submit();
}
});
});
</script>
The html code snippet
<div >
<label class="control-label" ><spring:message code="email.choice"/></label>
<div class="controls">
<form:radiobutton path="emailChoice" id="emailChoice1" value="yes" /><label><spring:message code="yes"/></label>
<form:radiobutton path="emailChoice" id="emailChoice2" value="no" /><label><spring:message code="no"/></label>
</div>
</div>
</div>
<div id="emailsection" >
<div class="form-group">
<label class="control-label"><spring:message code="email"/></label>
<div class="controls"><input name="email" id="email" type="text" size="30" maxlength="60">
</div>
</div>
<div class="form-group">
<label class="control-label"><spring:message code="emailConfirmation"/></label>
<div class="controls"> <input name="emailConfirmation" id="emailConfirmation" type="text" size="30" maxlength="60">
</div>
</div>
</div>
Comments
Post a Comment