Form Validation

In today’s web development, establishing seamless, intuitive forms for user signups is critical to providing a great user experience. A well-designed form facilitates the collection of critical data, such as names, email addresses, and passwords, while also providing users with instruction and feedback. This post explains how to create a simple yet effective signup form with Bootstrap 4 responsive design and JavaScript input validation.

The Container and Card Layout

The form is wrapped inside a container class to ensure that it is centered on the page and fits within the overall layout. The actual form fields are placed inside a Bootstrap card (<div class="card p-3">), providing a clean, professional appearance with added padding for a better user experience. The card layout also makes the form stand out visually on the webpage, giving it a polished look.

				
					<div class="container"> 
<div class="row justify-content-center">
<div class="col-lg-5 mt-5">
  <div class="card p-3">
  <h1 class="text-center">Signup Form</h1><br>
  <form action=""method="POST"onsubmit="return abc()">
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <span id="sp1"style="color: red"></span>
                    <input type="text"placeholder="First Name"class="form-control"id="fname">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <span id="sp2"style="color: red"></span>
                    <input type="text"placeholder="Last Name"class="form-control"id="lname">
                </div>
            </div>
        </div>
      <span id="sp3"style="color: red"></span>
      <input type="text"placeholder="Email" id="email"class="form-control">
      <br>
      <span id="sp4"style="color: red"></span>
      <input type="text"placeholder="Password" id="password"class="form-control">
      <br>
      <span id="sp5"style="color: red"></span> <span id="sp6"style="color: red"></span>
      <input type="text"placeholder="Conform Password" id="cpassword"class="form-control">
      <br>
      <input type="submit"class="btn btn-success">
    </form>
</div>
  
</div>
</div>
</div>

Form Fields

The form captures key information such as:

First Name and Last Name: First name and last name input will show to the user that they will fill the first name and last name in the input fields.

Email Address: Emails show that they fill email on input email field because without email field it will show an error and ask you that filling email field is mandatory.

Password and Confirm Password: Here, it will ask you if the password and confirm password will not match then it will show an error and say fill the same password, the same password that the password input will fill you have to fill the confirm password otherwise it will show an error.

JavaScript Input Validation

				
					<script>
function abc() {
    var fname = $("#fname").val().trim();
    var lname = $("#lname").val().trim();
    var email = $("#email").val().trim();
    var password = $("#password").val().trim();
    var cpassword = $("#cpassword").val().trim();
    var f1 = 0, f2 = 0, f3 = 0, f4 = 0, f5 = 0, f6 = 0;
    
    if(fname.length == 0) {
        f1 = 1;
    }
    if(lname.length == 0) {
        f2 = 1;
    }
    if(email.length == 0) {
        f3 = 1;
    }
    if(password.length <= 8) {
        f4 = 1;
    }
    if(cpassword.length <= 8) {
        f5 = 1;
    }
    if(password != cpassword) {
        f6 = 1;
    }
    
    if(f1 == 1) {
        $("#sp1").text("Enter First Name");
    } else {
        $("#sp1").text("");
    }
    if(f2 == 1) {
        $("#sp2").text("Enter Last Name");
    } else {
        $("#sp2").text("");
    }
    
    if(f3 == 1) {
        $("#sp3").text("Enter Email");
    } else {
        $("#sp3").text("");
    }
    
    if(f4 == 1) {
        $("#sp4").text("Enter Password (minimum 8 characters)");
    } else {
        $("#sp4").text("");
    }
    
    if(f5 == 1) {
        $("#sp5").text("Enter Confirm Password");
    } else {
        $("#sp5").text("");
    }
    
    if(f6 == 1) {
        $("#sp6").text("Passwords do not match");
    } else {
        $("#sp6").text("");
    }
    
    return f1 == 0 && f2 == 0 && f3 == 0 && f4 == 0 && f5 == 0 && f6 == 0;
}
</script>

A key part of this form’s functionality is the JavaScript validation applied before submission. The validation script, written in jQuery, checks for several criteria:

All fields must be filled out.
The password must be at least 8 characters long.
The “Confirm Password” field must match the “Password” field.
The script ensures that users provide the correct information and displays real-time feedback by showing error messages in red under the respective input fields.

Here’s an example of how the validation function works:

This script ensures that users get immediate feedback if they try to submit incomplete or incorrect information. It enhances user experience by preventing unnecessary form submissions and providing helpful hints on how to fix the issues.

Conclusion
By combining Bootstrap 4 for responsive design and JavaScript for validation, this signup form ensures both visual appeal and functionality. The form is mobile-friendly, adaptable to different screen sizes, and provides real-time feedback to users, reducing the chance of submission errors and enhancing overall user experience.

This basic form can be extended further by integrating additional fields, more complex validation rules, or connecting it to a back-end system to process the submitted data.