jQuery Validate不使用Bootstrap Carousel内部的表格

Question

i具有一个形式，其中输入字段在引导旋转频率内。这些字段使用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在此处发布

Answer 1

如另一个答案中所述，jQuery validate插件默认情况下忽略了隐藏的字段。但是，您可以通过告诉ignore选项来忽略"无"。

，而不是切换到完全不同的插件。

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

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

Answer 2

您的问题与bootstrap旋转木马有关。当不可见所需的字段时，在验证过程中未考虑。

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

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>