In this tutorial, we are going to learn how to validate a form using jquery in javascript and html. we are going to make a simple Sign Up form in which we will add an Email, Telephone, Password, and Confirm Password field. and then we are going to make a Sign-Up button and when the user clicks on the button then we will process all the fields using jquery before sign up a user.
Logic to validate a form in javascript using jquery
As you see in the above image if a user does not provide valid input fields then we will show an error using a query on the top of the page. and if the user provides all the details and if the details are valid then we will show a submitted message on the top of the page as you see in the given image below.
Also, feel free to add your own code or CSS for styling the page. because here am only focusing on the javascript part not much on the styling part.
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<script src="jquery.min.js"></script>
<style type="text/css">
body {
font-family: helvetica, sans-serif;
font-size: 130%;
}
input {
padding: 5px 5px 12px 5px;
font-size: 25px;
border-radius: 5px;
border: 1px solid grey;
width: 320px;
}
label {
position: relative;
top: 12px;
width: 200px;
float: left;
}
#wrapper {
width: 550px;
margin: 0 auto;
}
.form {
margin-bottom: 10px;
}
#submitbutton {
width: 130px;
margin-left: 200px;
}
#errormessage {
color: red;
font-size: 90%, important;
}
#success{
display: none;
color: green;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="errormessage">
</div>
<div id="success">
Form submitted!
</div>
<div class="form">
<label for="email">Email</label>
<input type="text" name="email" id="email" placeholder="yourname@gmail.com">
</div>
<div class="form">
<label for="phone">Telephone</label>
<input type="text" name="phone" id="phone" placeholder="9999999999">
</div>
<div class="form">
<label for="password">Password</label>
<input type="password" name="password" id="password">
</div>
<div class="form">
<label for="passwordcofirm">Confirm Password</label>
<input type="password" name="passwordcofirm" id="passwordcofirm">
</div>
<div class="form">
<input type="submit" id="submitbutton" value="Sign Up">
</div>
</div>
<script type="text/javascript">
function isEmail(email) {
var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
}
$("#submitbutton").click(function(){
var errormessage = "";
var fieldmissing = "";
if ($("#email").val() == "") {
fieldmissing += "<br>Email";
}
if ($("#phone").val() == "") {
fieldmissing += "<br>Phone";
}
if ($("#password").val() == "") {
fieldmissing += "<br>Password";
}
if ($("#passwordcofirm").val() == "") {
fieldmissing += "<br>Comfirm password";
}
if (fieldmissing != "") {
errormessage += "<p> The following fields are missing:" + fieldmissing;
}
if (isEmail($("#email").val()) == false) {
errormessage += " <p>your email address is not valid</p>";
}
if ($.isNumeric($("#phone").val()) == false) {
errormessage += "<p> your phone humber is not valid </p>";
}
if ($("#password").val() != $("#passwordcofirm").val()) {
errormessage += "<p> your password doesn't match";
}
if (errormessage != "") {
$("#errormessage").html(errormessage);
}else{
$("#success").show();
$("#errormessage").hide();
}
});
</script>
</body>
</html>
Explanation
Here first of all we create two div elements errormessage and success inside the wrapper div. these two elements are responsible for showing the error and success messages on the top of the form. at the beginning of the loading of form, these two div will not show because we set the style to none for these two elements.
after that, we created a form element inside which we created four input fields, for Email, Telephone, Password, and Confirm Password, and a Sign-Up button.
now using jquery we will validate the form. first of all, we have created an isEmail function that will take email as an argument and then validate it using regular expression. after that, we set a click action on the Sign-Up button. and check for all the fields in the form.
we will also check if the email is valid. if the phone number is not numeric and the password is not matching with confirm password field. and if there is any error then we will show all the errors or if the fields are valid then it will show the Form Submitted message on the top of the page.
Also, read
- Code Player Javascript project for students
- Stopwatch in Javascript
- Javascript project for practice – Github user information