Here we are validating all common input types which we use in register form like name, email, phone, password, radio button, select option.
Includes
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
Script
<script>
function Validate() {
jQuery.validator.setDefaults({
errorPlacement: function (error, element) {
error.appendTo('#invalid-' + element.attr('id'));
}
});
//To validate letters
$.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>
<body onload="Validate()">
<div class="box-header">Register From</div>
<div class="box">
<form action='#' method='post' id='Form' enctype='multipart/form-data'>
<div class="col-md-8">
<label>Title</label>
<select id="Title" name="Title" class="form-control">
<option value="">Select Title</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Mss.">Mss.</option>
<option value="Dr.">Dr.</option>
</select>
<div id="invalid-Title" class="error_msg"></div>
</div>
<div class="col-md-8">
<label>First Name</label>
<input type="text" id="FirstName" name="FirstName" class="form-control"
placeholder="First Name"/>
<div id="invalid-FirstName" class="error_msg"></div>
</div>
<div class="col-md-8">
<label>Mobile</label>
<input type="text" id="Mobile" name="Mobile" class="form-control" placeholder="Mobile">
<div id="invalid-Mobile" class="error_msg"></div>
</div>
<div class="col-md-8">
<label>Email</label>
<input type="text" id="Email" name="Email" class="form-control" placeholder="Email">
<div id="invalid-Email" class="error_msg"></div>
</div>
<div class="col-md-8">
<label>Password</label>
<input type="password" id="Password" name="Password" class="form-control"
placeholder="Password"/>
<div id="invalid-Password" class="error_msg"></div>
</div>
<div class="col-md-8">
<label>Confirm Password</label>
<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control"
placeholder="ConfirmPassword"/>
<div id="invalid-ConfirmPassword" class="error_msg"></div>
</div>
<div class="col-md-8">
<label>Gender</label>
<input type="radio" id="Gender" name="Gender" value="Male"> Male
<input type="radio" id="GenderNew" name="Gender" value="Female"> Female<br>
<div id="invalid-Gender" class="error_msg"></div>
</div>
<div class="col-md-12" align="center">
<input type="submit" value="Submit" class="btn btn-danger" id="Submit" name="Submit"
onclick="Register()">
</div>
</form>
</div>
</body>
Result
*Please share, comment and subscribe to PHP Javascript for more.
