JQuery Validate does not work with forms inside Bootstrap Carousel

Question

I have a form where the input fields are inside a Bootstrap Carousel. These fields are validated using jquery validation.

<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>

Although the validator prints the error messages for invalid input, it does not prevent the form from submitting.

$("#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(); 
        }

    });

How do I fix this?

The jsfiddle is posted here

score 3 · Accepted Answer · answered Feb 14 '19 at 18:42

As stated in another answer, the jQuery Validate plugin ignores hidden fields by default. However, instead of switching to an entirely different plugin, you can simply disable the ignore option by telling it to ignore "nothing".

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

Your demo: https://jsfiddle.net/omtjeuhg/

gaetanoM · Answer 2 · 2019-02-14T19:31:08.860

Your issue is related to bootstrap carousel. When a required field is not visible it is not considered during the validation.

Hence, you need to validate, before sliding, each visible input field. You need to add also a check on save click in order to test if there is a required field not visible: in this case you need to slide to the correct carousel page and let the user complete the action.

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>

Really? Your answer is to switch to another plugin when the user can simply set the `ignore` option? — Sparky, Feb 14 '19 at 18:43

JQuery Validate does not work with forms inside Bootstrap Carousel

2 Answers2