JQuery Validate 不适用于 Bootstrap Carousel 中的表单

Question

我有一个表单，其中输入字段位于 Bootstrap Carousel 中。这些字段使用 jquery 验证进行验证。

<form action="#" method="post" id="carouselForm">
<div class="container">

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">

  <div class="carousel-inner">
    <div class="carousel-item active">
      Name : <input type='text' name="name"> <p>
      Age : <input type='text' name="age"> <br>
    </div>

    <div class="carousel-item">
      Street : <input type='text' name="street"> <p>
      State : <input type='text' name="state"> <br>
    </div>
    <div class="carousel-item">
      Country : <input type='text' name="country"> <p>
      PIN : <input type='text' name="pin"> <br>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" style="left: -90px;" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true" ></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<button type="submit" class="shadow btn btn-primary float-right " id="btnValidate">Save  </button>
</div>

</form>

虽然验证器会打印无效输入的错误消息，但它不会阻止表单提交。

$("#carouselForm").validate({
        rules : {
            "name" : { 
                required : true,
                minlength : 3
            },
      "age" : { 
                required : true,
                minlength : 3
            },
      "street" : { 
                minlength : 3
            },
      "country" : { 
                required : true,
                minlength : 3
            }


        },  
        success: function(label,element) {
            },
        submitHandler : function(form) {
            //return false;

            form.submit(); 
        }

    });

我该如何解决这个问题？

jsfiddle 是posted here

Answer 1

如另一个答案所述，jQuery Validate 插件默认忽略隐藏字段。但是，您无需切换到完全不同的插件，只需通过告诉它忽略“无”来禁用 ignore 选项。

$("#carouselForm").validate({
    ignore: [],  // ignore NOTHING
    rules : {
        "name" : { 
            required : true,
                minlength : 3
            }, ....

您的演示：https://jsfiddle.net/omtjeuhg/

Answer 2

您的问题与引导轮播有关。当必填字段不可见时，在验证期间不会考虑它。

因此，您需要在滑动之前验证每个可见输入字段。您还需要在 save 点击上添加检查，以测试是否有不可见的必填字段：在这种情况下，您需要滑动到正确的轮播页面并让用户完成操作。

document.body.style.backgroundColor='grey';


$("#carouselForm").validate({
    rules: {
        "name": { // <-- assign by field name and use quotes
            required: true,
            minlength: 3
        },
        "age": { // <-- assign by field name and use quotes
            required: true,
            minlength: 3
        },
        "street": { // <-- assign by field name and use quotes
            minlength: 3,
            required: true
        },
        "country": { // <-- assign by field name and use quotes
            required: true,
            minlength: 3
        }
    },
    success: function (label, element) {
        var x = this;
    },
    submitHandler: function (form) {
        //return false;

        form.submit(); // <-- this is default
    }
});

//
// added...................
//
$('#carouselExampleControls').on('slide.bs.carousel', function(e) {
    $("#carouselForm :input:visible").each(function(idx, ele) {
        $(this).valid();
    });
});
$('#btnValidate').on('click', function (e) {
    var ele = $("#carouselForm :input.error:first");
    if (ele.is(':not(:visible)')) {
        var idx = ele.closest('.carousel-item').index();
        $('#carouselExampleControls').carousel(idx);
    }
})

body {
    background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

<hr>
<h1>
    Enter Your Details
</h1>

<form action="#" method="post" id="carouselForm">
    <div class="container">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    Name : <input type='text' name="name">

                    <p>
                        Age : <input type='text' name="age"> <br>
                </div>
                <div class="carousel-item">
                    Street : <input type='text' name="street">

                    <p>
                        State : <input type='text' name="state"> <br>
                </div>
                <div class="carousel-item">
                    Country : <input type='text' name="country">

                    <p>
                        PIN : <input type='text' name="pin"> <br>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" style="left: -90px;"
               data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <button type="submit" class="shadow btn btn-primary float-right " id="btnValidate">Save</button>
    </div>
</form>