$.validator.addMethod("letters", function (value, element) {
return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});
//To validate Number
$.validator.addMethod("number", function (value, element) {
return this.optional(element) || value == value.match(/^[0-9]*$/);
});
//To validate digits for phone number that should start with only 7 or 8 or 9
$.validator.addMethod("digits", function (value, element) {
return this.optional(element) || value == value.match(/^^[789]\d{9}$/);
});
//To validate password
$.validator.addMethod("pwcheckNumber",
function (value, element) {
return /\d/.test(value);
});
$.validator.addMethod("pwcheckUppercase",
function (value, element) {
return /[A-Z]/.test(value);
});
$.validator.addMethod("pwcheckSpecial",
function (value, element) {
return /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(value);
});
//Form validation
$("#Form").validate({
rules: {
Title: {
required: true,
},
FirstName: {
required: true,
minlength: 3,
letters: true
},
Mobile: {
required: true,
number: true,
minlength: 10,
maxlength: 10,
digits: true
},
Email: {
required: true,
email: true,
},
Password: {
required: true,
minlength: 8,
pwcheckNumber: true,
pwcheckUppercase: true,
pwcheckSpecial: true,
},
ConfirmPassword: {
required: true,
equalTo: "#Password"
},
Gender: {
required: true,
}
},
//Message suggestions that you see on screen
messages: {
Title: {
required: "Please select title",
},
FirstName: {
required: "Please enter first name",
minlength: "Name should be minimum 3 characters",
letters: "Only letters and spaces are allowed",
},
Mobile: {
required: "Please enter phone number",
minlength: "Please enter valid phone number",
maxlength: "Please enter valid phone number",
digits: "Phone number should be start with 789",
},
Email: {
required: "Please enter email",
minlength: "Please enter a valid email address",
},
Password: {
required: "Please enter password",
minlength: "Password must be minmum 8 character",
pwcheckNumber: "Password must contains one digit",
pwcheckUppercase: "Password must contains atleast one uppercase letter",
pwcheckSpecial: "Password must contains atleast one special character",
},
ConfirmPassword: {
required: "Please enter confirm password ",
equalTo: "Confirm password must same as password",
},
Gender: {
required: "Please select gender type"
}
}
});
})($);
}
</script>
//CSS
<style>
.error_msg {
color: red;
}
body{
position: absolute;
width: 600px;
height: 200px;
z-index: 15;
top: 15%;
left: 30%;
margin: -100px 0 0 -150px;
}
.box-header{
background: #dc3545;
width: 500px;
height: auto;
text-align: center;
color: white;
font-size: 30px;
padding: 10px;
}
.box{
background: #43c181;
padding-top: 10px;
padding-left: 110px;
padding-bottom: 30px;
width: 500px;
height: auto;
}
</style>
