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 размещено здесь

Answer 1

Как указано в другом ответе, плагин jQuery Validate по умолчанию игнорирует скрытые поля.Однако вместо переключения на совершенно другой плагин вы можете просто отключить параметр ignore, сказав ему игнорировать «ничто».

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

Ваша демонстрация: https://jsfiddle.net/omtjeuhg/

Answer 2

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

Следовательно, перед скольжением вам необходимо проверить каждое видимое поле ввода.Вам также нужно добавить отметку на сохранить клик, чтобы проверить, если обязательное поле не видно: в этом случае вам нужно перейти на правильную страницу карусели и позволить пользователю выполнить действие.

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>