jquery- validate specific element when click on a button

Question

I have a form that deals with registration like below:

I want to validate each tab instead of the entire form so user have to fill up first tab before moving to the next. I tried using validator.element( "email" ) but it does not respond at all.

This is my code:

<form method="POST" action="{{ route('register') }}" id="register-form">
                    @csrf
                    <div class="tab-content" id="myTabContent">
                        <!-- Registration  Tab-->
                        <div class="tab-pane fade show active" id="registration"  role="tabpanel" aria-labelledby="registration-tab">
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Account Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="email">Email</label>
                                    <input type="email" name="email" class="form-control" required id="email" placeholder="Email">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="password">Password</label>
                                    <input type="password" name="password" class="form-control" required id="password">
                                </div>

                                <div class="form-group col-md-12">
                                    <label for="password-confirm">Confirm Password</label>
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>

                            <!-- Next Button -->
                            <div class="text-right">
                                <!-- <a class="btn btn-secondary next-button" id="information-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Next</a> -->
                                <a class="btn btn-secondary next-button bjsh-btn-gradient" id="next-btn">Next</a>
                            </div>
                        </div>

                        <!-- Information Tab -->
                        <div class="tab-pane fade" id="information"  role="tabpanel" aria-labelledby="information-tab">
                            <!-- Personal Particulars -->
                            <h5 class="text-center" style="background-color: #303030; color: #ffffff; padding: .5rem; border: 1px solid #e5e5e5;">Personal Particulars</h5>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="full_name">Full Name (as per NRIC)</label>
                                    <input type="text" name="full_name" class="form-control" id="full_name" required placeholder="Full Name">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="nric">NRIC Number</label>
                                    <input type="text" name="nric" class="form-control" id="nric" placeholder="NRIC Number">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 1</label>
                                    <input type="text" name="address_1" id="address_1" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 2</label>
                                    <input type="text" name="address_2" id="address_2" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="address_1">Address Line 3</label>
                                    <input type="text" name="address_3" id="address_3" class="form-control" placeholder="Residential Address Line 1">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="postcode">Postcode</label>
                                    <input type="text" name="postcode" id="postcode" class="form-control" placeholder="Postcode">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="city">City</label>
                                    <input type="text" name="city" id="city" class="form-control" placeholder="City">
                                </div>
                                <div class="form-group col-md-12">
                                    <label for="state">State</label>
                                    <select name="state" id="state" class="form-control">
                                        <option disabled selected>Choose your state..</option>
                                        @foreach($states as $state)
                                        <option class="text-capitalize" value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="contact_number_home">Contact Number (Home)</label>
                                    <input type="text" name="contact_number_home" class="form-control" placeholder="Home Contact Number">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="contact_number_mobile">Contact Number (Mobile)</label>
                                    <input type="text" name="contact_number_mobile" class="form-control" placeholder="Mobile Contact Number">
                                </div>
                            </div>

Script (broken):

var validator = $( "#register-form" ).validate({

        rules: {
        email: {
              required: true,
              // Specify that email should be validated
             // by the built-in "email" rule
             email: true
                   },
        password: {
                 required: true,
                 minlength: 8,

                 },
        password_confirmation:{
            required: true,
            minlength: 8,
            equalTo: "#password"

        }
        },
        messages: {
            email: "Please enter an email",
            password: "Please enter a password",
            password_confirmation: "Password does not match"
        }

});

$('#next-btn').click(function() {
    var validator = $( "#myform" ).validate();
    validator.element("email");


});

How do I make it work considering I need to validate each tab before the final tab which has a submit button?

dale landry · Accepted Answer · 2020-03-22 21:23:51Z

I used a bootstrap 4 css styling for the example code, this can easily be changed by adding your own css to the JQuery class functions.

I used a toggling of attributes and classes as well as a msg field to display error and success messages for the example. Specifically I am disabling the input fields proceeding the focused input until one has been finished the proceeding fields lock. Once the match on the passwords is complete the submit button unlocks.

UPDATE March 22nd 2020: Added minimum requirement for password. You can also add required characters to the password section as well, just add a regex with matching characters in the password and password confirm sections of the JQuery code.

IMPORTANT NOTE: Front end validation should only be done for formatting really, the bulk of your validation should be done on the backend!

$("#confirm_password").keyup(function() {
  var passLength = $(this).val().length;
  var minLength = 8;
  if (passLength < minLength) {
    $("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
    $("#submit").prop('disabled', true);
  } else if ($("#password").val() != $(this).val()) {
    $("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
    $("#submit").prop('disabled', true);
  } else {
    $("#msg").html("Passwords matched, you can submit the form now").removeClass("alert-danger").addClass("alert alert-success");
    $("#submit").prop('disabled', false);
  }
});
$("#password").keyup(function() {
  var passLength = $(this).val().length;
  var minLength = 8;
  if (passLength < minLength) {
    $("#msg").html('Length is short, password must be a minumum of ' + minLength + ' characters.').removeClass("alert-success").addClass("alert alert-danger");
    $("#submit").prop('disabled', true);
  } else if ($(this).val() != $("#confirm_password").val()) {
    $("#msg").html("Password do not match").removeClass("alert-success").addClass("alert alert-danger");
    $("#submit").prop('disabled', true);
  } else {
    $("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
    $("#submit").prop('disabled', false);
  }
});
$("#usr_email").change(function() {
  var sEmail = $(this).val();
  if ($.trim(sEmail).length == 0) {
    $("#msg").html("Email is mandatory").removeClass("alert-success").addClass("alert alert-danger");
    $("#password").prop('disabled', true);
    $("#confirm_password").prop('disabled', true);
    $("#submit").prop('disabled', true);
  } else if (validateEmail(sEmail)) {
    $("#msg").html("Your Email is valid, now you can continue").removeClass("alert-danger").addClass("alert alert-success");
    $("#password").prop('disabled', false);
    $("#confirm_password").prop('disabled', false);
    $("#submit").prop('disabled', true);
  } else {
    $("#msg").html("Invalid Email address").removeClass("alert-success").addClass("alert alert-danger");
    $("#password").prop('disabled', true);
    $("#confirm_password").prop('disabled', true);
    $("#submit").prop('disabled', true);
  }
});
// Function that validates email address through a regular expression.
function validateEmail(sEmail) {
  var filter = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
  if (filter.test(sEmail)) {
    return true;
  } else {
    return false;
  }
}

<!-- Bootstrap 4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form method="post">
  <label for="usr_email" class="col-sm-2 control-label">Email</label>
  <div class="col-sm-10">
    <input class="form-control" type="email" id="usr_email" name="usr_email" placeholder="EMAIL" required>
  </div>
  <label for="usr_password" class="col-sm-2 control-label">Password</label>
  <div class="col-sm-10">
    <input class="form-control" id="password" type="password" name="usr_password" placeholder="PASSWORD" required>
  </div>
  <label for="confirm_password" class="col-sm-2 control-label">Confirm Password</label>
  <div class="col-sm-10">
    <input class="form-control" id="confirm_password" type="password" name="confirm_password" placeholder="CONFIRM PASSWORD" required>
  </div>
  <input type="submit" id="submit" name="submit" value="Submit">
</form>
<div class="col-sm-6" id="msg"></div>

Collectives™ on Stack Overflow

jquery- validate specific element when click on a button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related