How To Use JavaScript and jQuery for Form Validation

The following post will discuss how to use JavaScript and jQuery for form validation. This is a great way to ensure that the user has answered all of your questions before submitting their form. You will also get the source code of jQuery form validation.

Form validation is a crucial part of any website. It’s important to ensure that the information you’re collecting is accurate and not tampered with by someone else. jQuery simplifies the process in many ways. You can validate all or just specific fields, use a JavaScript regular expression or regex when submitting the form, and much more!

How To Validate Registration Form in jQuery and JavaScript?

We first need a registration form with some fields on it. We can then add in some HTML inputs and some HTML buttons so that the user can submit their data if they are ready. To make sure everything goes smoothly, let’s go over how JavaScript works for validating forms.

To validate any HTML form using jQuery and JavaScript follow these steps:

1. What are JavaScript and jQuery?
2. Why use it for form validation?
3. Setting up your HTML Form
4. Validating your input fields with JavaScript and jQuery
5. Validating the user-entered data upon submission of a form
6. Handling invalid user-entered data upon submission of a form

You can also watch the following complete step-by-step video tutorial to validate your registration form.

Recommended for You!

• 10 Easy HTML CSS Projects for Beginners with Source Codes
• How to Run PHP Code in VSCode Terminal Console
• How to Receive Email from HTML Form using PHP

1. What are JavaScript and jQuery?

JavaScript is a programming language that runs in the browser. jQuery is an open-source JavaScript library that makes it easier to access elements on your pages, animate them, handle events, and more.

The use of both together allows you to validate forms without interfering with how they are submitted or how any other form validation functions within WordPress work.

2. Why jQuery/JavaScript for form validation?

The primary reason to use form validation is to prevent your users from submitting forms with incorrect information. This can also save you time and money because it prevents the user from having to re-enter their data. One way of doing this is by using JavaScript for form validation, however, there are other ways that we will look at next.

3. Setting up your HTML Form

The first thing you need to do is set up your form. You can see how that’s done in the HTML below:

Next, we want to add some jQuery event handlers for our input fields like email, phone number, and password. We will be doing this with a bit of CSS as well since we don’t necessarily want all inputs or text boxes within a form fieldset element initialized at once!

The way I have it here makes sense because I’m going through each section one by one (login, email address information, etc.) but feel free to modify how you wish if you’d like things more dynamic. Here’s how it works: When an input box is clicked on inside the login_form class selector div, $(this) 

Click the link below to get the source code of the above registration form:

SOURCE CODE: How to Create a Registration Form using HTML CSS and JavaScript?

4. Validating your input fields with JavaScript and jQuery

Use JavaScript and jQuery for form validation – how to do it. This is a great way to ensure that the user has answered all of your HTML form data before submitting their form.

I will show you how easy it is to validate input fields with JavaScript or jQuery by using multiple different techniques such as required field validation, mandatory field validation, matching regexp patterns, etc… We’ll also provide you some useful source code snippets so you can get started right away!

Source Code – Form Validation in JavaScript/jQuery

function validateEmail(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 emailMissing = "";
  var phoneMissing = "";
  var passwordMissing = "";
  var emailErrorMessage = "";
  var phoneErrorMessage = "";
  var passwordConfirmError = "";
  var checkboxError = "";

  /* Checking email validation */
  if ($("#email").val() == "") {
    emailMissing = "Email address is empty!";  
    $("#emailMissing").html(emailMissing); 
}

if (validateEmail($("#email").val()) == false) {    
  emailErrorMessage = "<p>Your email address is not valid</p>";
    $("#emailError").html(emailErrorMessage);
}

 /* Displaying email Error messages */
 if (emailMissing != "") {         
  $("#emailError").hide(); 
  $("#emailMissing").show();
} else if (emailErrorMessage != "") {                   
  $("#emailError").show(); 
  $("#emailMissing").hide();
} else{
  $("#emailError").hide(); 
  $("#emailMissing").hide();
}

/* Phone number validation */
if ($("#phone").val() == "") {
  phoneMissing = "Please enter your phone number!";
  $("#phoneMissing").html(phoneMissing);
}
if ($.isNumeric($("#phone").val()) == false) {                    
  phoneErrorMessage = "<p>Your phone number is not Valid!</p>" 
  $("#phoneError").html(phoneErrorMessage); 
}

/* Display phone error message */
if (phoneMissing != "") { 
  $("#phoneMissing").show();                  
  $("#phoneError").hide();
} else if(phoneErrorMessage != "") {                 
  $("#phoneError").show(); 
  $("#phoneMissing").hide();
} else {
  $("#phoneError").hide(); 
  $("#phoneMissing").hide();
}

/* Password validation */
if ($("#password").val() == "") {
  passwordMissing = "Password field is required!";
  $("#passwordMissing").html(passwordMissing);
}

  if ($("#password").val() != $("#passwordConfirm").val()) {                  
    passwordConfirmError = "<p>Your passwords don't match</p>";
    $("#passwordConfirmlError").html(passwordConfirmError);
  }

/* Display password error message */
if (passwordMissing != "") {                   
  $("#passwordMissing").show(); 
  $("#passwordConfirmlError").hide(); 
} 
 else if(passwordConfirmError != "") {                 
  $("#passwordConfirmlError").show();
  $("#passwordMissing").hide(); 
} else {
  $("#passwordConfirmlError").hide();
  $("#passwordMissing").hide(); 
}

/* Checkbox click validation */
if($('#checkbox').prop("checked") == false){
  checkboxError = "<p>Must agree with our terms!</p>";
  $('#checkboxError').html(checkboxError);
}
/* Display checkbox error */
if (checkboxError != "") {                   
  $("#checkboxError").show(); 
} 
 else {                 
  $("#checkboxError").hide(); 
}

/* Display success message if there is no error */
if (emailErrorMessage == "" && phoneErrorMessage == "" && passwordConfirmError == "" && checkboxError == "") {
  $("#successMessage").show();
  $("#errorMessage").hide();
} else {
  $("#successMessage").hide();
  $("#errorMessage").show();
}
  
});

All input fields should have a purpose behind them. So if one doesn’t have a specific function tied to it then how would someone know what information needs to be entered into the said box?

5. Validating the user-entered data on form submission

Validating the user-entered data upon submission of a form is important. By using JavaScript and jQuery to validate your form, you can make sure that any entered data is of the correct type (e.g., numbers for phone numbers) before allowing users to submit their responses.

Source Code – Display Form Validation Error Messages

Following are the HTML div elements with form validation error messages. You can place these error messages in the HTML code of your form wherever you want to show errors to the client.

<!-- Success and Error messages, place at top of the form -->
      <div id="successMessage">Congratulations! Registration completed.</div>
      <div id="errorMessage"> <span>&#9888;</span> Error: some data is missing!  </div>

<!--Paste it below the email input -->
        <div class="error" id="emailError"></div>
        <div class="error" id="emailMissing"></div>

<!--Paste it below the phone number input -->
        <div class="error" id="phoneMissing"></div>
        <div class="error" id="phoneError"></div>

<!--Paste it below the password input -->
        <div class="error" id="passwordMissing"></div>

<!--Paste it below the Confirm password input -->
<div class="error" id="passwordConfirmlError"></div>

<!--Paste it below the Checkbox input -->
 <div class="error" id="checkboxError"></div>

CSS Source Code

The following is the CSS source code related to the above HTML code. Paste it into your CSS file.

.error {       
  color: red;
  font-size: 12px !important;
  position: relative;
  top: -10px;
  left: 40px;
}

#successMessage {
  color: green;
  font-size: 15px !important;
  display:none;
  position: relative;
  top: -20px;
  left: 40px; 
}

#errorMessage {
  color: red;
  font-size: 15px !important;
  display:none;
  position: relative;
  top: -20px;
  left: 40px; 
}

6. Handling invalid user-entered data upon submission of a form.

This one is included on the server side using a common technique called “white listing”, where only values are accepted that have been preapproved. This ensures that the data submitted by users will always conform to your expectations.

You can implement this approach by validating user input on both client-side as well as server-side of an application or website so you know what kind of information has been entered before it gets stored in your database.