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

Posted 2023-05-08

【中文标题】JQuery Validate 不适用于 Bootstrap Carousel 中的表单

【英文标题】：JQuery Validate does not work with forms inside Bootstrap Carousel

【发布时间】：2019-07-08 12:54:52

【问题描述】：

我有一个表单，其中输入字段位于 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

【参考方案1】：

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

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

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

【参考方案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>

【讨论】：

真的吗？你的答案是当用户可以简单地设置ignore 选项时切换到另一个插件？

@Sparky 过失。谢谢