javascript - jquery-单击按钮时验证特定元素

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 字段来显示示例的错误和成功消息。具体来说，我将禁用输入字段继续进行焦点输入，直到完成后续字段锁定。密码匹配完成后，提交按钮就会解锁。

2020 年 3 月 22 日更新:添加了密码的最低要求。您还可以向密码部分添加所需的字符，只需在 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>