<form id="signupForm">
<div class="mb-3">
  <label for="exampleInputEmail1" class="form-label">Email</label>
  <input type="email" class="form-control" name="email" id="exampleInputEmail1"
    aria-describedby="emailHelp">
  <div id="emailHelp" class="form-text">We will keep your email account.</div>
</div>
<div class="mb-3">
  <label for="exampleInputPassword1" class="form-label">Password</label>
  <input type="password" class="form-control" name="password" id="exampleInputPassword1">
</div>

<div class="mb-3">
  <label for="confirm_password" class="form-label">Comfirm Password</label>
  <input type="password" class="form-control" name="confirm_password" id="confirm_password">
</div>

<div class="mb-3 form-check">
  <input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input" />
  <label class="form-check-label">I agree the privacy policy of user.</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script type="text/javascript">
                          
                          
$.validator.setDefaults({
      submitHandler: function () {
          alert("submitted!");
      }
  });
  $(document).ready(function () {
      $("#signupForm").validate({
          rules: {
              email: {
                  required: true,
                  email: true
              },
              password: {
                  required: true,
                  minlength: 5
              },
              confirm_password: {
                  required: true,
                  minlength: 5,
                  equalTo: "#password"
              },
              agree: "required"
          },
          messages: {
              password: {
                  required: "Please fill in the password",
                  minlength: "the minimum length is more than 5"
              },
              confirm_password: {
                  required: "Please fill in the comfirm password",
                  minlength: "the minimum length is more than 5",
                  equalTo: "Not Equal To Password"
              },
              agree:{
                  required: "Please agree privacy policy of user.",
              }
          },
          //Choose element to show error message
          errorElement: "span",
          errorPlacement: function (error, element) {
              // Add the `invalid-feedback` class to the error element
              error.addClass("invalid-feedback");
              if (element.prop("type") === "checkbox") {
                  error.insertAfter(element.next("label"));
              } else {
                  error.insertAfter(element);
              }
          },
          highlight: function (element, errorClass, validClass) {
              $(element).addClass("is-invalid").removeClass("is-valid");
          },
          unhighlight: function (element, errorClass, validClass) {
              $(element).addClass("is-valid").removeClass("is-invalid");
          }
      });

  });     
                          
</script>
                          
                          

                            
<form id="signupForm2">

<div class="mb-3">
  <label for="name" class="form-label">Name <span style="color: red;">*</span></label>
  <input type="text" class="form-control" name="name" id="name" required>
</div>

<div class="mb-3">
  <label for="title" class="form-label">Title</label>
  <input type="text" class="form-control" name="title" id="title" required>
</div>
<div>
  <div class="row"><label for="36420" class="col-sm-4 col-form-label">Is the partner active?<span
        style="color:red;">*</span></label>
    <div class="col-sm-8 col-form-label">
      <div class="radioContainer">
        <div class="form-check form-check-inline"><input class="form-check-input" type="radio"
            name="ACTIVE_IND" id="36420_0" value="Y" required=""><label class="form-check-label"
            for="36420">Yes</label></div>
        <div class="form-check form-check-inline"><input class="form-check-input" type="radio"
            name="ACTIVE_IND" id="36420_1" value="N" required=""><label class="form-check-label"
            for="36421">No</label></div>
      </div>
    </div>
  </div>
</div>
<div class="mb-3 form-check">
  <input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input" required />
  <label class="form-check-label">I agree the privacy policy of user.</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
                            
                            
  $.validator.setDefaults({
        submitHandler: function () {
            alert("submitted!");
        }
    });
    $(document).ready(function () {
      $("#signupForm2").validate({
        onfocusout: false,
        onkeyup: false,
        errorElement: "div",
        errorPlacement: function (error, element) {
          // Add the `invalid-feedback` class to the error element
          error.addClass("invalid-feedback");
          if (element.prop("type") === "radio") {
            error.appendTo(element.parents().parents(".radioContainer"));
          } else if (element.prop("type") === "checkbox") {
            error.appendTo(element.next("label"));
          } else {
            error.insertAfter(element);
          }
        },
        messages: {
          required: "This field is required."
        },
        highlight: function (element, errorClass, validClass) {
          if ($(element).prop("type") === "radio") {
            $(element).parents().next().children().addClass("is-invalid").removeClass("is-valid");
          }
          $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element, errorClass, validClass) {
          $(element).addClass("is-valid").removeClass("is-invalid");
        },
        removehighlight: function( element, errorClass, validClass ) {
           if (element.type === "radio") {
               this.findByName(element.name).removeClass(errorClass).removeClass(validClass);
           } else {
               $(element).removeClass(errorClass).removeClass(validClass);
           }
       }
      });
  
    });     
                            
  </script>