时间戳

首页 > 解决方案 > 如何在 jquery .Validation() 中验证动态日期选择器？

javascript - 如何在 jquery .Validation() 中验证动态日期选择器？

问题描述

我正在尝试在数据库中插入动态日期选择器。一切正常！除了 jquery .validation。如果输入字段为空，则完成验证规则，应显示必填消息，例如“请选择一个日期”：如果我添加三个动态行，同时将其保持为空并按下提交按钮，它将验证消息显示为“请选择一个日期”现在移动到三行！

a）在第一行我选择了一个日期，然后我按下提交按钮，它在剩余的输入字段中显示“请选择一个日期”

b）然后接下来我在第二个输入字段中选择了一个日期并按下提交按钮，这里需要发生的是第三个输入字段显示验证消息，但日期选择器自动显示在第二个输入字段中。我不知道为什么在第二个输入字段中自动显示日期选择器，而它已经选择了日期......

<div class="form-body pal">
    <div class="col-md-12 col-md-offset-10">
        <div class="form-group">
            <button type="button" id="add_details_button" class="btn btn-info add_details_button"><i class="fa fa-plus"></i> Add Date</button>    //class name used for onclick to add row
        </div>
    </div>
</div>  
<div class="form-body pal">
    <div class="col-md-12">
        <div class="form-group">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover add_row" id="details">
                    <thead>
                        <tr>
                            <th >Date</th>
                            <th >Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    // Append table with add row form on add new button click
    $(".add_details_button").click(function(){    //button click to add row
        var index = $("#details").index();    
        var randaom_val = Math.floor(Math.random() * 100000000)    //Generating unique key for the added row
        var row_index = index+randaom_val;
        var row = '<tr>' +
            '<td><input class="datepicker_recurring_start" name="date[]" id="date'+row_index+'" data-date-format="dd/mm/yyyy" placeholder="Visit Date"  class="form-control"/></td>' + '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' + '</tr>'
        $("#details").append(row);
        $(".datepicker_recurring_start").datepicker({
        autoclose: true
    })
});
    // Delete row on delete button click
    $(document).on("click", ".delete", function() {
        $(this).parents("tr").remove();
    });
});

//Jquery Validation
$(function() {
    $("#add_date_form").validate( {
        // Rules for form validation
        rules: {
            'date[]': {
                required: true,
            },
        },
        // Messages for form validation
        messages: {
            'date[]': {
                required: 'Select a valid visit date'
            },
        },
        // Do not change code below
        errorPlacement: function(error, element) {
        error.insertAfter(element);
        },
        submitHandler: function(form) {
            var details_row_count = $('#details tr').length;
            if (details_row_count<=1) {
                var msg = '<p class="fa fa-times-circle-o" style="font-size: 50px; float:left;margin-top: 10px;margin-right: 10px;"></p> Invalid Input...';
                $.notific8(msg,{ theme: 'ruby',life: 500 });
                return false;
            }
            $('#submit_date').attr("disabled", true);
            form.submit();                
        }
    });
});

标签： javascriptjquery

解决方案

$(document).ready(function() {
var count=0;
    // Append table with add row form on add new button click
    $(".add_details_button").click(function(){    //button click to add row
        var index = $("#details").index();    
        var randaom_val = Math.floor(Math.random() * 100000000)    //Generating unique key for the added row
        var row_index = index+randaom_val;
        var row = '<tr>' +
            '<td><input class="datepicker_recurring_start" name="dateField['+count+']" id="date'+row_index+'" data-date-format="dd/mm/yyyy" placeholder="Visit Date"  class="form-control" required/></td>' + '<td><button type="button" class="delete btn btn-danger">Delete</button></td>' + '</tr>';
            count=count+1;
        $("#details").append(row);
        $(".datepicker_recurring_start").datepicker({
           autoclose: true
        });
});
    // Delete row on delete button click
    $(document).on("click", ".delete", function() {
        $(this).parents("tr").remove();
    });
});

//Jquery Validation
$(function() {
 $("#add_date_form").validate();

    $("#add_date_form").validate( {
        // Rules for form validation
       
        // Messages for form validation
        messages: {
            'dateField[]': {
                required: 'Select a valid visit date'
            },
        },
        // Do not change code below
        errorPlacement: function(error, element) {
        error.insertAfter(element);
        },
        submitHandler: function(form) {
            var details_row_count = $('#details tr').length;
            if (details_row_count<=1) {
                var msg = '<p class="fa fa-times-circle-o" style="font-size: 50px; float:left;margin-top: 10px;margin-right: 10px;"></p> Invalid Input...';
                $.notific8(msg,{ theme: 'ruby',life: 500 });
                return false;
            }
            $('#submit_date').attr("disabled", true);
            form.submit();                
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<form name="add_date_form" id="add_date_form" method="POST" autocomplete="off" class="form-separated">
<div class="form-body pal">
    <div class="col-md-12 col-md-offset-10">
        <div class="form-group">
            <button type="button" id="add_details_button" class="btn btn-info add_details_button"><i class="fa fa-plus"></i> Add Date</button>
         </div>
    </div>
</div>  
<div class="form-body pal">
    <div class="col-md-12">
        <div class="form-group">
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover add_row" id="details">
                    <thead>
                        <tr>
                            <th >Date</th>
                            <th >Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
    <div class="form-body pal">
        <div class="col-md-10 col-md-offset-10">
            <div class="form-group">
                <button type="submit" name="submit_date" id="submit_date" class="btn btn-primary submit"><i class="fa fa-save"></i> Submit</button>
            </div>
       </div>
   </div>
</form>

如果您创建具有相同名称的输入将不起作用

<input type="text" name="date[]" />
<input type="text" name="date[]" />
<input type="text" name="date[]" />
<input type="text" name="date[]" />

而不是这个

 <input type="text" name="date[0]" />
    <input type="text" name="date[1]" />
    <input type="text" name="date[2]" />
    <input type="text" name="date[3]" />

只需为每个输入添加索引

并在验证器中为输入标签编写规则dateField[]或包含required属性。

我希望这能帮到您。

推荐阅读