如何做jQuery表單在提交之前驗證html元素

我想對所有三個標記進行表單驗證，驗證後啓用提交按鈕，直到驗證完成，不啓用提交按鈕。如何做jQuery表單在提交之前驗證html元素

<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>

只啓用如果所有的表單驗證完成

例

來源

2016-07-16 rselvaganesh

嘗試去爲角， –

我想你想是這樣的

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

來源

2016-07-16 04:21:21

如果你堅持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

來源

2016-07-16 04:23:33

$(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

來源

2016-07-16 04:33:23 Ranjan

你建議增加jquery.validat.js這個簡單的驗證每個字節是昂貴的，可以做下15分鐘的工作。並且還支撐禁用虛假無效 –

爲什麼我建議是因爲他已經在他的代碼中使用了J查詢。 – Ranjan

@ShintuJoseph在問題中，他明確提到如何在jQuery中做。 – Ranjan

如何做jQuery表單在提交之前驗證html元素

回答

相關問題