Hey learner welcome to onhandtrick.com. in this tutorial i am going to share form validation using jquery. Form Validation using Html,Css Javascript.
There are two ways we can validate form .client side and server side .
Form validation using jQuery
Form validation Html Page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">l̥
<style>
.error {
color: red;
}
</style>
</head>
<body style="background-color: #f0f1f2;">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card">
<div class="card-body">
<h2 class="text-center text-success">Form Validation</h2>
<form id="register" action="h.html" method="post">
<div class="mb-3">
<label>User Name</label>
<input name="username" type="text" class="form-control">
</div>
<div class="mb-3">
<label> Email Address</label>
<input name="email" type="text" class="form-control">
</div>
<div class="mb-3">
<label>Phno</label>
<input name="phno" type="text" class="form-control">
</div>
<div class="gen">
<label>Gender</label><br>
<div class="form-check form-check-inline">
<input name="gender" class="form-check-input" type="radio" value="Male">
<label class="form-check-label">Male</label> <br>
<input name="gender" class="form-check-input" type="radio" value="Female">
<label class="form-check-label">Female</label>
</div>
</div><br>
<select name="course" id="select_field" class="course form-select" aria label="Default select example">
<option value="">Courses</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
<option value="BTECH">BTECH</option>
<option value="MTECH">MTECH</option>
</select> <br>
<div class="mb-3">
<label>Password</label>
<input id="password" name="password" type="password" class="form-control">
</div>
<div class="mb-3">
<label>Confirm Password</label>
<input name="cpassword" type="text" class="form-control">
</div>
<button class="btn btn-primary col-md-4 offset-md-4">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>Form Validation Using Javascript
script.js
$(function() {
var $registerForm = $("#register");
$registerForm.validate({
rules: {
username: {
required: true,
lattersonly: true
},
email: {
required: true,
email: true
},
phno: {
required: true,
numericonly: true,
minlength: 10,
maxlength: 12
},
gender: {
required: true
},
course: {
required: true
},
password: {
required: true,
all: true
},
cpassword: {
required: true,
equalTo: '#password'
}
},
messages: {
username: {
required: 'username must be required',
lattersonly: 'invalid name'
},
email: {
required: 'email must be required',
email: 'email invalid'
},
phno: {
required: 'phno must be required',
numericonly: 'Phno invalid',
minlength: 'min 10 digit',
maxlength: 'mx 12 digit'
},
gender: {
required: 'gender must be required'
},
course: {
required: 'course must be required'
},
password: {
required: 'password must be required',
all: 'space is not allowed'
},
cpassword: {
required: 'confirm password must be required',
equalTo: 'password mismatch'
}
},
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo(element.parents(".gen"));
} else {
error.insertAfter(element);
}
}
})
jQuery.validator.addMethod('lattersonly', function(value, element) {
return /^[^-\s][a-zA-Z_\s-]+$/.test(value);
});
jQuery.validator.addMethod('numericonly', function(value, element) {
return /^[0-9]+$/.test(value);
});
jQuery.validator.addMethod('all', function(value, element) {
return /^[^-\s][a-zA-Z0-9_\s-]+$/.test(value);
});
})Conclusion
Guys i shared form validation using jquery source code, i hope you like this post. share with your friends circle.
good work ;