Fatal编程技术网
  • javascript/
  • Javascript 如何在提交之前对html元素进行jQuery表单验证

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

javascript jquery html forms validation

Javascript 如何在提交之前对html元素进行jQuery表单验证,javascript,jquery,html,forms,validation,Javascript,Jquery,Html,Forms,Validation,我想对所有三个标签进行表单验证，在验证之后，启用submit按钮，直到验证完成，才启用submit按钮 <html> <head> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/datepicker.css" /> <link rel="stylesheet" href="css/mystyl

我想对所有三个标签进行表单验证，在验证之后，启用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>


报告：
选择报告
报告1
报告2
报告3
$（函数（）{
var now=新日期（）；
var yearsell=新日期（）；
yearSelled.setFullYear（（now.getFullYear（）-2））；
$（'.datepicker'）.datepicker({
格式：“mm/dd/yyyy”，
起始日期：年月日，
截止日期：现在
});
var defaultDate=moment（）.format（'DD/MM/YYYY'）；
$（“#日期选择器1”）.val（默认日期）；
$（“#日期选择器2”）.val（默认日期）；
});
开始日期：
结束日期：
$（文档）.ready（函数（）{
//需要验证功能
});
仅当所有表单验证完成时才启用“提交”按钮

范例
我想你想要这样的东西

      $(document).ready(function() {
// before validation
$("#submit").attr("disabled","disabled");
// after validation
$("#submit").removeAttr("disabled");
        });
如果您坚持需要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
}))

尝试使用angular，它可以在15分钟内完成这项工作。您建议添加jquery.validat.js进行此简单验证，每个字节的成本都很高。。另外，prop disabled false是invalid为什么我建议是因为他已经在他的代码中使用了jquery。@ShintuJoseph在问题中清楚地提到了如何在jquery.Yes中执行，但不是jquery.validate。jsp所有脚本都非常相似，validate是一个预定义的robost函数，因此我们必须使用此功能。 
$(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');
    }
});