更改-BootStrap

时间：2019-10-30 01:19:43

标签： javascript jquery html bootstrap-4 bootstrapvalidator

在提交表单时，日期选择器字段会进行验证并突出显示它是强制性的。但是即使从选择器中选择了日期，验证也不会消失。该字段仍以红色突出显示，并阻止表单提交。

enter image description here

这是我尝试使用on change函数重新验证的JS：

   function lpad(n, width, z) {
    z = z || '0';
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  }
 function doSubmit() {
    $('#filterForm').bootstrapValidator('validate');
    if ($('#filterForm').bootstrapValidator('isValid').has('.has-error').length == 0) {
      // Make the ajax call here.
      var link = "[LL_REPTAG_URLPREFIXFULL /]?func=ll&objId=[LL_REPTAG_$MainReport /]&objAction=RunReport";
      var datepicker_StartDate = $.trim($('#datepicker_StartDate').val());
      var datepicker_EndDate = $.trim($('#datepicker_EndDate').val());
      var resultStart = datepicker_StartDate.split("/");
      var resultEnd = datepicker_EndDate.split("/");
      var Start = resultStart[2] + "/" + resultStart[1] + "/" + resultStart[0];
      var End = resultEnd[2] + "/" + resultEnd[1] + "/" + resultEnd[0]
      var startdate = "D/" + Start + ":0:0:0"
      var enddate = "D/" + End + ":23:59:59"
      link = link + "&inputlabel1=" + startdate
      link = link + "&inputlabel2=" + enddate
      link = link + "&inputlabel3=" + $.trim($('#IncomingIAGRefno').val())
      link = link + "&inputlabel4=" + $.trim($('#LetterRefno').val())
      link = link + "&inputlabel5=" + $.trim($('#status').val())
      document.location.href = link;
    }
  }
  $(document).ready(function() {
    var sd = new Date();
    sd.setDate(sd.getDate() - 30);
    var dd = new Date();
    $('#datepicker_StartDate').val(lpad(sd.getDate(), 2) + "/" + lpad(sd.getMonth() + 1, 2) + "/" + lpad(sd.getFullYear(), 4));
    $('#datepicker_EndDate').val(lpad(lpad(dd.getDate(), 2) + "/" + lpad(dd.getMonth() + 1, 2) + "/" + +dd.getFullYear(), 4));
    //Validataion Begins
    $('#filterForm').bootstrapValidator({
      // To use feedback icons, ensure to use Bootstrap v3.1.0 or later
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        datepicker_StartDate: {
          validators: {
            stringLength: {
              min: 8,
            },
            notEmpty: {
              message: 'The Start Acceptance Date is required and cannot be empty'
            },
            date: {
              format: 'dd/mm/yyyy',
              message: 'The format is dd/mm/yyyy'
            }
          }
        },
        datepicker_EndDate: {
          validators: {
            stringLength: {
              min: 8,
            },
            notEmpty: {
              message: 'The End Acceptance Date is required and cannot be empty'
            }
          }
        }
      }
    });
    $("#datepicker_StartDate").on('changeDate', function(e) {
      $('#filterForm').bootstrapValidator('revalidateField', 'datepicker_StartDate');
    });
    $("#datepicker_EndDate").on('changeDate', function(e) {
      $('#filterForm').bootstrapValidator('revalidateField', 'datepicker_EndDate');
    });
  });
  $(function() {
    $("#datepicker_StartDate").datepicker();
$("#datepicker_EndDate").datepicker();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

    
<body>
  <div class="container">

<form class="well form-horizontal" id="filterForm" METHOD="post" ACTION="[LL_REPTAG_URLPREFIX /]">
  <INPUT TYPE="hidden" NAME="func" VALUE="ll">
  <INPUT TYPE="hidden" NAME="objId" VALUE="[LL_REPTAG_$MainReport /]">
  <INPUT TYPE="hidden" NAME="objAction" VALUE="runreport">
  <fieldset>

    <legend>
      <center>
        <h4 style="font-family:arial black;color: #285a8b;"><b>Report</b></h4>
      </center>
    </legend><br>

    <div class="form-group">
      <label class="col-md-4 control-label">Start Acceptance Date</label>
      <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
          <input type="text" id="datepicker_StartDate" name="datepicker_StartDate" placeholder="Start Acceptance Date" class="form-control date-picker">
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-4 control-label">End Acceptance Date</label>
      <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
          <input type="text" id="datepicker_EndDate" name="datepicker_EndDate" placeholder="End Acceptance Date" class="form-control">
        </div>
      </div>
    </div>

   
    <!-- Button -->
    <div class="form-group">
      <label class="col-md-4 control-label"></label>
      <div class="col-md-4"><br>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<button type="button" id="runReportButton" onclick="return doSubmit();" class="btn btn-warning">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSUBMIT <span class="glyphicon glyphicon-send"></span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>

      </div>
    </div>
  </fieldset>
</form>
  </div>
  </div><!-- /.container -->

</body>

1 个答案:

答案 0 :(得分：0)

与您的代码有关的问题是验证需要使用“ DD / MM / YYYY”格式。

请更改日期选择器的格式，它将起作用。另外，您还需要添加代码中缺少的form标记。并通过onsubmit表单触发您的逻辑。参见下面的示例代码。

 $(function() {
    $("#datepicker_StartDate").datepicker({
         format: 'dd/mm/yyyy'
     });
     $("#datepicker_EndDate").datepicker({
         format: 'dd/mm/yyyy'
     });
 })

完整的工作代码：

       function lpad(n, width, z) {
        z = z || '0';
        n = n + '';
        return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
    }

    function doSubmit() {
        $('#filterForm').bootstrapValidator('validate');
        if ($('#filterForm').bootstrapValidator('isValid').has('.has-error').length == 0) {
            // Make the ajax call here.
            var link = "[LL_REPTAG_URLPREFIXFULL /]?func=ll&objId=[LL_REPTAG_$MainReport /]&objAction=RunReport";
            var datepicker_StartDate = $.trim($('#datepicker_StartDate').val());
            var datepicker_EndDate = $.trim($('#datepicker_EndDate').val());
            var resultStart = datepicker_StartDate.split("/");
            var resultEnd = datepicker_EndDate.split("/");
            var Start = resultStart[2] + "/" + resultStart[1] + "/" + resultStart[0];
            var End = resultEnd[2] + "/" + resultEnd[1] + "/" + resultEnd[0]
            var startdate = "D/" + Start + ":0:0:0"
            var enddate = "D/" + End + ":23:59:59"
            link = link + "&inputlabel1=" + startdate
            link = link + "&inputlabel2=" + enddate
            link = link + "&inputlabel3=" + $.trim($('#IncomingIAGRefno').val())
            link = link + "&inputlabel4=" + $.trim($('#LetterRefno').val())
            link = link + "&inputlabel5=" + $.trim($('#status').val())
            document.location.href = link;
        }
    }
    $(document).ready(function() {
        var sd = new Date();
        sd.setDate(sd.getDate() - 30);
        var dd = new Date();
        $('#datepicker_StartDate').val(lpad(sd.getDate(), 2) + "/" + lpad(sd.getMonth() + 1, 2) + "/" + lpad(sd.getFullYear(), 4));
        $('#datepicker_EndDate').val(lpad(lpad(dd.getDate(), 2) + "/" + lpad(dd.getMonth() + 1, 2) + "/" + +dd.getFullYear(), 4));
        //Validataion Begins
        $('#filterForm').bootstrapValidator({
            // To use feedback icons, ensure to use Bootstrap v3.1.0 or later
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                datepicker_StartDate: {
                    validators: {
                        stringLength: {
                            min: 8,
                        },
                        notEmpty: {
                            message: 'The Start Acceptance Date is required and cannot be empty'
                        },
                        date: {
                            format: 'DD/MM/YYYY',
                            message: 'The format is dd/mm/yyyy'
                        }
                    }
                },
                datepicker_EndDate: {
                    validators: {
                        stringLength: {
                            min: 8,
                        },
                        notEmpty: {
                            message: 'The End Acceptance Date is required and cannot be empty'
                        }
                    }
                }
            }
        });
        $("#datepicker_StartDate").on('changeDate', function(e) {
            $('#filterForm').bootstrapValidator('revalidateField', 'datepicker_StartDate');
        });
        $("#datepicker_EndDate").on('changeDate', function(e) {
            $('#filterForm').bootstrapValidator('revalidateField', 'datepicker_EndDate');
        });
    });
    $(function() {
        $("#datepicker_StartDate").datepicker({
            format: "dd/mm/yyyy"
        });
        $("#datepicker_EndDate").datepicker({
            format: "dd/mm/yyyy"
        });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
    <form class="well form-horizontal" id="filterForm" METHOD="post" ACTION="[LL_REPTAG_URLPREFIX /]">
        <INPUT TYPE="hidden" NAME="func" VALUE="ll">
        <INPUT TYPE="hidden" NAME="objId" VALUE="[LL_REPTAG_$MainReport /]">
        <INPUT TYPE="hidden" NAME="objAction" VALUE="runreport">
        <fieldset>
            <legend>
                <center>
                    <h4 style="font-family:arial black;color: #285a8b;"><b>Report</b></h4>
                </center>
            </legend><br>
            <div class="form-group">
                <label class="col-md-4 control-label">Start Acceptance Date</label>
                <div class="col-md-4 inputGroupContainer">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        <input type="text" id="datepicker_StartDate" name="datepicker_StartDate" placeholder="Start Acceptance Date" class="form-control date-picker">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">End Acceptance Date</label>
                <div class="col-md-4 inputGroupContainer">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                        <input type="text" id="datepicker_EndDate" name="datepicker_EndDate" placeholder="End Acceptance Date" class="form-control">
                    </div>
                </div>
            </div>

            <!-- Button -->
            <div class="form-group">
                <label class="col-md-4 control-label"></label>
                <div class="col-md-4"><br> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button" id="runReportButton" onclick="return doSubmit();" class="btn btn-warning">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspSUBMIT <span class="glyphicon glyphicon-send"></span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</div>
<!-- /.container -->

希望这可以解决问题。

相关问题
最新问题