Question

我正在尝试在数据库中插入动态datepicker。一切正常！除了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();                
        }
    });
});

Answer 1

$(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属性。

我希望这会对您有所帮助。

如何在jquery .Validation（）中验证动态datepicker？

1 个答案: