jQuery Form Validation On Submit
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Pragati
In this article we will show you the solution of jQuery form validation on submit, verifying the relevant data that a user has entered into an input field is known as form validation. Here, we'll show you how to make use of jQuery to verify a simple form's login,password, or confirmed password.
It grants you more capabilities including the simple display of personalized error messages and the integration of conditional logic in jQuery form validation.
Client-side & server-side validation are the two different types of validation.In client-side validation, data is checked for accuracy using JavaScript in the browser before being sent to the server.
Imagine, for instance, that a user fills out a required field but then submits the form anyhow.
Instead of having the user submit the form, you may catch this if you utilize jQuery form validation to check the form. Your users can avoid errors when filling out forms by using JavaScript form validation.
Step By Step Guide On jQuery Form Validation On Submit :-
<! DOCTYPE html>
<html>
<head>
<title>
JQuery validation demo
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
body {
font-family: 'Lato';
font-weight: 300;
font-size: 1.25rem;
}
body {
font-family: "Poiret One", cursive;
background: #3494e6;
background: -webkit-linear-gradient (
to right,
#ec6ead,
#3494e6
);
background: linear-gradient (
to right,
#ec6ead,
#3494e6
);
}
h4 {
font-weight: bold;
margin-bottom: 2.5rem;
font-family: 'Lato';
align: center;
font-size: 2rem;
}
form {
margin-top: 20px;
margin-left: 100px;
}
p {
margin-top: 20px;
margin-left: 100px;
}
h4 {
margin-top: 20px;
margin-left: 100px;
}
p.note {
font-size: 1rem;
color: red;
}
input {
border-radius: 5px;
border: 1px solid #ccc;
padding: 4px;
font-family: 'Lato';
width: 300px;
margin-top: 10px;
}
label {
width: 300px;
font-weight: bold;
display: inline-block;
margin-top: 20px;
}
label span {
font-size: 1rem;
}
label.error {
color: red;
font-size: 1rem;
display: block;
margin-top: 5px;
}
input.error {
border: 1px dashed red;
font-weight: 300;
color: red;
}
[type="reset"], html [type="button"] {
margin-left: 0;
border-radius: 0;
background: black;
color: white;
border: none;
font-weight: 300;
padding: 10px 0;
line-height: 1;
}
button {
margin-left: 0;
border-radius: 0;
background: black;
color: white;
border: none;
font-weight: 300;
padding: 10px 0;
line-height: 1;
}
[type="submit"] {
display: inline-block;
padding: 0.35em 1.2em;
border: 0.1em solid #3494e6;
margin: 0 0.3em 0.3em 0;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: 'Roboto',sans-serif;
font-size: 1rem;
text-align: center;
transition: all 0.2s;
}
[type="submit"]:hover {
color: #FFFFFF;
background-color: #3494e6;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"> </script>
<script>
$(document).ready (function () {
$("#basic-form").validate ();
});
</script>
<body>
<center>
<h4> jQuery Validation Form Example </h4>
<form id = "basic-form" action="" method="post">
<p>
<label for= "name"> First Name <span> (required, at least 8 characters) </span> </label>
<input id="name" name="name" minlength="8" type="text" required>
</p>
<p>
<label for = "name"> Last Name <span> </span> </label>
<input type = "text" id="name" name="name" minlength="8" required>
</p>
<p>
<label for="email"> E-Mail <span> (required) </span> </label>
<input id="email" type="email" name="email" required>
</p>
<p>
<label for="password"> Password </label>
<input type="password" name="password" id="password" required >
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>
</center>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a form, under the form we create firstname, last name, email, password.
- Then we create a button to submit.
- After that we close program using </center></body></html>
Conclusion :-
Form validation is the process of verifying or determining if all of the values are entered correctly or not. A form should always be validated before being submitted.
In the past, file validation was performed on the server, using up server CPU cycles and prolonging user wait times.
They wait to see if the data has been entered into the form accurately. Hence, client-side form validation ensures that the webserver receives only accurate input.
I hope this article on jQuery form validation on submit helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
