jquery - проверить указанный элемент c при нажатии на кнопку

Question

У меня есть форма, которая имеет дело с регистрацией, как показано ниже:

Я хочу проверить каждую вкладку вместо всей формы, поэтому пользователь должен Заполните первую вкладку, прежде чем перейти к следующей. Я пытался использовать validator.element( "email" ), но он не отвечает вообще.

Это мой код:

<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>

Скрипт (не работает):

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");


});

Как сделать Я заставляю его работать, учитывая, что мне нужно проверить каждую вкладку перед последней вкладкой, на которой есть кнопка отправки?

Answer 1

Я использовал стиль bootstrap 4 css для примера кода, это можно легко изменить, добавив свои css к функциям класса JQuery.

Я использовал переключение атрибуты и классы, а также поле msg для отображения сообщений об ошибках и успехах для примера. В частности, я отключаю поля ввода, продолжая фокусированный ввод, пока не будет завершена блокировка исходящих полей. После завершения сопоставления паролей кнопка «Отправить» разблокируется.

ОБНОВЛЕНИЕ 22 марта 2020 года: Добавлено минимальное требование для пароля. Вы также можете добавить необходимые символы в раздел пароля, просто добавьте регулярное выражение с соответствующими символами в пароле и разделы подтверждения пароля JQuery.

ВАЖНО ПРИМЕЧАНИЕ: Проверка внешнего интерфейса должна выполняться только для реального форматирования, основная часть проверки должна выполняться на внутреннем интерфейсе!

$("#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>