In this article, you will learn how to create a simple form validation using jquery. Through the following jquery form validation example, you can validate Name, Password, Email, Phone No, Checkbox selected or not, and upload file validation also.
- Keep reading on How to validate Google reCAPTCHA in JavaScript
Registration form validation using jquery in HTML
It is important to validate the form submitted by the user because it can have inappropriate values. So, validation is a must to authenticate the user. Client-side validation is also helpful in creating a better user experience.
Find the below jquery form validation demo with source code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Simple jQuery Form Validation Example</title>
<style>
.challenge-upload span {
margin-left: 50px;
margin-top: 5px;
}
.challenge-upload input {
opacity: 0;
position: relative;
z-index: 99;
}
.challenge-upload p {
position: absolute;
background-color: #E1E1E1;
border: 2px solid #E1E1E1;
border-radius: 5px;
font-size: 16px;
color: #616163 !important;
}
.register-body {
background: #F1F1F1;
}
.register-body .form-control {
border: 1px solid #BCBCBC;
border-radius: 5px;
}
.register-body label {
font-weight: 450;
}
.inner-bullets {
color: #707070;
}
.feedback-body a, .feedback-body button {
background: #2881C3 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: 10px;
font-size: 20px;
color: white !important;
}
</style>
</head>
<body>
<section class="register-body">
<div class="container d-flex justify-content-center py-5">
<form class="col-md-8" method="post" onsubmit="return false">
<p class="col-12 pb-md-4 px-0"><h2>Apply Online - jQuery Form Validation Example</h2></p>
<div class="form-group my-4 row">
<label class="col-sm-2 col-form-label px-2">Name <span class="required-text">*</span></label>
<div class="col-sm-10">
<input type="text" id="name" class="form-control">
<p id="name_message" class="text-danger m-0"></p>
</div>
</div>
<div class="form-group my-4 row">
<label class="col-sm-2 col-form-label px-2">Password <span class="required-text">*</span></label>
<div class="col-sm-10">
<input type="password" id="pwd" class="form-control">
<p id="pwd_message" class="text-danger m-0"></p>
</div>
</div>
<div class="form-group my-4 row">
<label class="col-sm-2 col-form-label px-2">Phone <span class="required-text">*</span></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" onkeypress="javascript:return isNumber(event)">
<p id="phone_message" class="text-danger m-0"></p>
</div>
</div>
<div class="form-group my-4 row">
<label class="col-sm-2 col-form-label px-2">Email <span class="required-text">*</span></label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
<p id="email_message" class="text-danger m-0"></p>
</div>
</div>
<div class="form-group my-4 row">
<label class="col-sm-4 col-form-label">Gender <span class="required-text">*</span></label>
<div class="col-sm-8 choice1">
<div class="form-check form-check-inline">
<input class="form-check" checked type="checkbox" id="defaultCheck1" value="male">
<label class="form-check-label" for="defaultCheck1" style="color: #8B8B8B">Male</label>
</div>
<div class="form-check form-check-inline ml-5">
<input class="form-check" type="checkbox" id="defaultCheck2" value="female">
<label class="form-check-label" for="defaultCheck2" style="color: #8B8B8B">Female</label>
</div>
<p id="check_message" class="text-danger m-0"></p>
</div>
</div>
<div class="form-group my-4 row">
<label class="col-sm-4 col-form-label">Upload Resume <span class="required-text">*</span></label>
<div class="d-flex challenge-upload col-sm-6">
<input name="project" id="upload-input" placeholder="Select a file" ref="fileInput" type="file" onchange="getFileName()">
<p class="px-4 py-2 text-white"><span class="px-4 m-0">Attach resume</span></p>
<div class="my-auto" id="fileName"></div>
<span id="upload_input_message" class="text-danger m-0 col-12"></span>
</div>
</div>
<div class="form-group col-12">
<div class="form-check pl-0 choice2">
<input class="form-check-input" type="checkbox" id="guidlines">
<label class="form-check-label mb-2" for="guidlines" style="cursor: pointer; color: #8B8B8B">
I have read the job description and selection criteria mentioned in the posting.
</label>
<p id="guidlines_message" class="text-danger m-0"></p>
</div>
</div>
<p class="text-center pb-4 feedback-body mt-5">
<button class="py-3 px-5" type="submit" id="btn" onclick="submitRegisterForm()" class="btn btn-primary">Submit Application</button>
</p>
</form>
</div>
</section>
<script>
var emailRegex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var nameregex = /^[a-zA-Z ]*$/;
function submitRegisterForm(){
var name = $("#name").val();
var pwd = $("#pwd").val();
var email = $.trim($("#email").val());
var phone = $.trim($("#phone").val());
var cv = $.trim($("#upload-input").val());
$("#name_message").html(" ");
$("#pwd_message").html(" ");
$("#email_message").html(" ");
$("#phone_message").html(" ");
$("#upload-input").html(" ");
if(name.trim() == ""){
$("#name").focus();
$("#name_message").html("Enter your name!");
return false;
}else if(!name.match(nameregex)){
$("#name").focus();
$("#name_message").html("Name can only contain alphabets!");
return false;
}else if(pwd.trim() == ""){
$("#pwd").focus();
$("#pwd_message").html("Enter password!");
return false;
}else if(phone.trim() == ""){
$("#phone").focus();
$("#phone_message").html("Enter your phone number!");
return false;
}else if(email.trim() == ""){
$("#email").focus();
$("#email_message").html("Enter your email!");
return false;
}else if(!email.match(emailRegex)){
$("#email").focus();
$("#email_message").html("Enter a valid email");
return false;
}else if ($("#defaultCheck1").prop('checked') == false && $("#defaultCheck2").prop('checked') == false){
$("#check_message").html("Please select one value");
$("#defaultCheck1").focus();
return false;
}else if(cv.trim() == ""){
$("#upload-input").focus();
$("#upload_input_message").html("Please upload your resume!");
return false;
}else if($("#guidlines").prop('checked') == false){
$("#guidlines_message").html("This is required!");
return false;
}else{
$("#name").val("");
$("#pwd").val("");
$("#email").val("");
$("#phone").val("");
$("#upload-input").val("");
$('input[type="checkbox"]').prop('checked', false);
alert("Submitted");
}
}
</script>
<script>
$('input.form-check').on('change', function() {
$('input.form-check').not(this).prop('checked', false);
});
function getFileName() {
var x = document.getElementById('upload-input')
document.getElementById('fileName').innerHTML = x.value.split('\\').pop()
}
function isNumber(evt) {
var iKeyCode = (evt.which) ? evt.which : evt.keyCode
if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
return false;
return true;
}
</script>
</body>
</html>Live Demo | Download Source Code
Conclusion
I hope you liked this article on a simple jquery form validation example code. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply