Wednesday, November 27, 2019

Form vallidation Script using Jquery

<form id="location_forms" method="post" action="">
  <div>
    <label for="in_location">First Name:</label>
    <input type="text" id="in_location" name="in_location"  onkeypress="return event.charCode >= 48 && event.charCode <= 57"></input>
  </div>
  <div>
    <label for="lname">Last Name:</label>
    <input type="text" id="out_location" name="out_location"  onkeypress="return event.charCode >= 48 && event.charCode <= 57"></input>
  </div>
  <div>
    <label for="user_email">Email:</label>
    <input type="email" id="user_email" name="user_email"></input>
  </div>
  <div>
    <label for="psword">Password:</label>
    <input type="password" id="psword" name="psword"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
  $('form[id="location_forms"]').validate({
    rules: {
      in_location: 'required',
      out_location: 'required',
      user_email: {
        required: true,
        email: true,
      },
      psword: {
        required: true,
        minlength: 8,
      }
    },
    messages: {
      in_location: 'This field is required',
      out_location: 'This field is required',
      user_email: 'Enter a valid email',
      psword: {
        minlength: 'Password must be at least 8 characters long'
      }
    },
    submitHandler: function(form) {
      form.submit();
    }
  });

});
</script>

No comments:

Post a Comment