如何在提交之前对html元素进行jQuery表单验证?

I want to do form validation for all three tags and after validation, enable the submit button until validation is done not to enable submit button.

我想要对所有三个标记进行表单验证，在验证之后，可以启用submit按钮，直到验证完成后才启用submit按钮。

<html>

  <head>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/datepicker.css" />
    <link rel="stylesheet" href="css/mystyle.css" />
    <script src="js/jquery-2.2.2.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/moment.js"></script>
  </head>

  <body>
    <form id="report-form">
      <div id="report-pane" class="row">
        <div class="col-xs-1">
          <label>Report:</label>
        </div>
        <div class="col-xs-2">
          <select class="form-control" id="report">
            <option value="" selected>Select Report</option>
            <option id="rep1" value="10">Report 1</option>
            <option id="rep2" value="20">Report 2</option>
            <option id="rep3" value="30">Report 3</option>
          </select>
        </div>
      </div>
      <!--Date Section-->
      <div id="date-pane" class="row">
        <!--Script for datepicker-->
        <script type="text/javascript">
          $(function() {
            var now = new Date();
            var yearsold = new Date();
            yearsold.setFullYear((now.getFullYear() - 2));

            $('.datepicker').datepicker({
              format: 'mm/dd/yyyy',
              startDate: yearsold,
              endDate: now
            });

            var defaultDate = moment().format('DD/MM/YYYY');
            $("#datePicker1").val(defaultDate);
            $("#datePicker2").val(defaultDate);

          });

        </script>
        <div class="col-xs-1">
          <label>Start Date:</label>
        </div>
        <div class='col-sm-3'>

          <input class="datepicker form-control" type="text" id="datePicker1" />
        </div>
        <div class="col-xs-1">
          <label>End Date:</label>
        </div>
        <div class='col-sm-3'>

          <input class="datepicker form-control" type="text" id="datePicker2" />
        </div>
      </div>
      <div id="button-pane" class="row">
        <div class="col-lg-12">
          <!-- <button class="btn btn-primary">Generate Report</button>-->
          <input type="submit" id="requestBtn" class="btn btn-primary" value="Generate Report"></input>
        </div>
      </div>
      <script type="text/javascript">
        $(document).ready(function() {

          // Validation Function Needed
        });

      </script>
    </form>
    <script src="js/bootstrap.js"></script>
  </body>

</html>

Enable the submit button only if all the form validation is done

只有在所有表单验证完成后才启用提交按钮。

Example

例子

3 个解决方案

#1

$(document).ready(function () {

$('#ccSelectForm').validate({
    rules: {
        inputEmail: {
            required: true,
            email: true
        },
        inputEmailConfirm: {
            equalTo: '#inputEmail'
        }
    }
});

$('#ccSelectForm input').on('keyup blur', function () {
    if ($('#ccSelectForm').valid()) {
        $('button.btn').prop('disabled', false);
    } else {
        $('button.btn').prop('disabled', 'disabled');
    }
});

});

Check this link

检查这个链接

#2

i think you want something like this

我想你想要这样的东西

      $(document).ready(function() {
// before validation
$("#submit").attr("disabled","disabled");
// after validation
$("#submit").removeAttr("disabled");
        });

#3

If you insist on Jq custom logic is needed,

如果您坚持Jq自定义逻辑，

var validationCallBk = function(){
    var report = $('#report').val();
    var startDate = $('#datePicker1').val();
    var endDate = $('#datePicker2').val();
    if(report != '' && startDate == somevaliddate && endDate == somevaliddate)
         //enable btn
    else
        //disable btn
};
$('#report').on('change',validationCallBk);
//use the datepicker on select event and call validationCallBk

#1

$(document).ready(function () {

$('#ccSelectForm').validate({
    rules: {
        inputEmail: {
            required: true,
            email: true
        },
        inputEmailConfirm: {
            equalTo: '#inputEmail'
        }
    }
});

$('#ccSelectForm input').on('keyup blur', function () {
    if ($('#ccSelectForm').valid()) {
        $('button.btn').prop('disabled', false);
    } else {
        $('button.btn').prop('disabled', 'disabled');
    }
});

});