jQueryフォームの操作サブミット前のhtml要素の検証

3つのタグすべてに対してフォーム検証を行い、検証後にサブミットボタンを有効にしないように検証が行われるまでサブミットボタンを有効にします。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>

すべてのフォーム検証は、私はあなたがJQカスタムを主張する場合は、この

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

出典

2016-07-16 rselvaganesh

角度のために行くお試しください、それはあなたが各バイトは高価であるこの簡単な検証のためjquery.validat.jsを追加することをお勧め –

を行われている場合にのみ、送信ボタンを有効にしますロジックは、必要とされている

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

ような何かをしたいと思います

例

出典

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

... 15分の下で仕事をし、また偽無効に支えることができますが無効です –

なぜ彼はすでに彼のコードでJのクエリを使用しているので、私はそれを示唆している。 – Ranjan

@ShintuJoseph質問に、彼は明らかにjqueryの中で行う方法と述べました。 – Ranjan

jQueryフォームの操作サブミット前のhtml要素の検証

答えて

関連する問題