jQuery Form Validation In Bootstrap

jQuery form validation can be implemented in Bootstrap by using the jQuery Validation plugin. This plugin provides an easy way to add validation rules to your form fields and display error messages to the user if the input is not valid.

Here are the steps to implement jQuery form validation in Bootstrap:

1. Include the jQuery library and the jQuery Validation plugin in your HTML file. You can download the jQuery library and the jQuery Validation plugin from their respective websites or use a CDN.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

2. Add the “required” attribute to the form fields that must be filled in by the user.

<form>
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" class="form-control" id="username" name="username" required>
  </div>
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" class="form-control" id="password" name="password" required>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. Initialize the jQuery Validation plugin by adding the following code at the end of your HTML file. This code will add validation rules to the form fields and display error messages if the input is not valid.

<script>
$(document).ready(function(){
  $("form").validate({
    rules: {
      username: {
        required: true,
        minlength: 3
      },
      password: {
        required: true,
        minlength: 6
      }
    },
    messages: {
      username: {
        required: "Please enter your username.",
        minlength: "Your username must be at least 3 characters long."
      },
      password: {
        required: "Please enter your password.",
        minlength: "Your password must be at least 6 characters long."
      }
    }
  });
});
</script>

This code initializes the jQuery Validation plugin on the “form” element and adds validation rules to the “username” and “password” fields. The “required” rule specifies that the field must be filled in, and the “minlength” rule specifies the minimum length of the input. The “messages” option specifies the error messages to be displayed if the input is not valid.

4. Customize the error messages and styling by adding the following CSS code to your HTML file:

<style>
label.error {
  color: red;
  font-weight: normal;
}
input.error {
  border-color: red;
}
</style>

This code customizes the error messages and styling of the form fields. The “label.error” selector sets the color of the error messages to red, and the “input.error” selector sets the border color of the form fields to red.

That’s it! Your Bootstrap form now has jQuery form validation. When the user submits the form, the jQuery Validation plugin will check the input and display error messages if the input is not valid.