Как проверить форму с несколькими вкладками?

Question

Итак, у меня есть регистрационная форма с тремя вкладками. На первой вкладке пользователь может ввести email, password и confirm password, а на второй вкладке указаны его данные, такие как адрес, номер мобильного телефона, состояние и т. Д. c, а на третьей вкладке пользователю может потребоваться согласиться на T & C и предоставить цифровую подпись.

Я могу включить любую из вкладок, но мне нравится, не заполняя некоторые поля, но когда я нажимаю кнопку регистрации (на третьей вкладке), она должна выполнить проверку на стороне клиента, чтобы убедиться, что все поля введенный и пароль / подтвердить пароль совпадают. Любое из полей, не отображаемых, должно уведомлять пользователя, например.

Код:

 <div>
        <div class="card border-rounded-0 bg-bujishu-gold guests-card">
            <h5 class="text-center bujishu-gold form-card-title">Registration</h5>
            <ul class="nav nav-tabs nav-fill" role="tablist">
                <li class="nav-item active">
                    <a class="nav-link register-tab-active active" id="home-tab" data-toggle="tab" href="#registration" role="tab" aria-controls="registration" aria-selected="true">Registration</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link register-tab-active" id="profile-tab" data-toggle="tab" href="#information" role="tab" aria-controls="profile" aria-selected="false">Information</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link register-tab-active" id="agreement-tab" data-toggle="tab" href="#agreement" role="tab" aria-controls="agreement" aria-selected="false">Agreement</a>
                </li>
            </ul>
            <div class="card-body">

                <!-- Dealer Registration Form -->
                <form method="POST" action="{{ route('register') }}">
                    @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">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" 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>

                            <div class="form-row">
                                <div class="col-12">
                                    <label style="display: block;" for="existing_customer_options">Are you an existing Destiny Code customer?</label>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="existing_customer" value="0" checked>
                                        <label class="form-check-label" for="existing_customer">No</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="existing_customer" value="1">
                                        <label class="form-check-label" for="existing_customer">Yes</label>
                                    </div>
                                </div>
                            </div>

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

Я пытался использовать required на входах, но, похоже, ничего не сделал. Из того, что я вижу, кажется, что jQuery - единственный оставшийся вариант, но мне интересно, есть ли более простой способ выполнить sh это?

Answer 1

Вот пример проверки с помощью JQuery для сопоставления паролей.
Я устанавливаю функцию с помощью .keyup(function(){}), затем я устанавливаю условие, которое проверяет значение каждого тега id, и если они не совпадают, я Я возвращаю сообщение об ошибке красного цвета и bg для предупреждения пользователя о несоответствии, я также отключаю кнопку отправки, чтобы они не могли отправить форму, пока не решат проблему. Затем, если есть совпадение, я возвращаю сообщение об успехе с зеленым цветом и bg и удаляю отключенный атрибут, чтобы форма могла быть отправлена.

ВАЖНОЕ ПРИМЕЧАНИЕ: Форма проверки в БД или для входа в систему следует делать в бэкэнде, а не во внешнем интерфейсе. Передний конец должен использоваться только в качестве первого шага для проверки. Имейте в виду, что JS можно отключить и сделать вашу проверку бесполезной. Используйте PHP или ASP для окончательной проверки!

$("#password").keyup(function() { // we fire on the keyup event
    //compare the values of the two passwords using .val() and their ids        
    if ($("#password").val() != $("#confirm_password").val()) {  

      // if they do not match we add an error message to the div #msg
      // we also remove potential latent classes and add new class to get warning font color and bg color
      $("#msg").html("Passwords do not match").removeClass("alert-success").addClass("alert alert-danger");
      // disable and style the submit button using .prop() and remove/addClass()
      $("#enter").prop('disabled', true);
      $("#enter").removeClass("alert-success").addClass("alert alert-danger");
    } else {
      // On success we add success msg and switch styles to note success in green
      $("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
      // Turn the submit back on by removing the disabled attr
      $("#enter").prop('disabled', false);
      $("#enter").removeClass("alert-danger").addClass("alert alert-success");
    }
  });
  //rinse and repeat for the #confirm-password tag
  $("#confirm_password").keyup(function() {
    if ($("#password").val() != $("#confirm_password").val()) {
      $("#msg").html("Passwords do not match").removeClass("alert-success").addClass("alert alert-danger");
      $("#enter").prop('disabled', true);
      $("#enter").removeClass("alert-success").addClass("alert alert-danger");
    } else {
      $("#msg").html("Passwords matched").removeClass("alert-danger").addClass("alert alert-success");
      $("#enter").prop('disabled', false);
      $("#enter").removeClass("alert-danger").addClass("alert alert-success");
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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>


<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>
<div id="msg"></div>
<input type="submit" value="Enter Password" id="enter">

Answer 2

Я нахожусь на моем телефоне, поэтому ваш код в принципе не читается из-за странного формата телефона. Что вы можете сделать, так это сделать так, чтобы при переключении вкладок вы фактически отображали скрытые элементы, а некоторые элементы скрывались в одной и той же форме. Это было бы очень легко сделать в JavaScript. Затем вы можете установить все из них на обязательные и тада. Не уверен на 100%, работает ли это, но я думаю, что так и будет. Убедитесь, что вы используете скрытый атрибут html, а не отображение css.