如何防止表格提交在字段上输入

Question

当点击在任何输入字段表单上输入时，都会提交并调用ajax。提交按钮单击时，我需要致电Ajax。

请检查我的html code。在这里我使用了表单标签和ajax jquery函数。当我在任何输入框中输入时，它调用提交功能并显示表单验证。如何解决此问题？

  <div class="card-body">
              <input id="contractnumber_aftersave"  type="hidden" readonly>
                 <form id="contract_form" action="#" name="contact" role="form" method="post" autocomplete="off">
                  <div class="row">
                    <div id="showcontractno" class="col-md-2 pr-1">
                      <div class="form-group">
                        <label for="contractnumberl">Contract Number</label>
                          <input id="contract_no"  type="text" class="form-control" readonly>
                      </div>
                    </div>
                    <div id="confirm" class="modal hide fade">
                              <div class="modal-dialog">
                                 <div class="modal-content">
                                    <div class="modal-body">
                                       Do you want to add the Activity Area?
                                    </div>
                                    <div class="modal-footer">
                                       <button type="button" data-dismiss="modal" class="btn btn-primary" id="yesconfirm">Yes</button>
                                       <button type="button" data-dismiss="modal" id="noconfirm" class="btn">No</button>
                                    </div>
                                 </div>
                              </div>
                           </div>
                     <div class="col-md-5 pr-1">
                      <div class="form-group">
                        <label for="cusnamel">Customer Name</label><span style="color:red;"> *</span>
                      <input class="form-control" id="contract_customername" name="contract_customername" type="text" placeholder="Enter Customer Name" onKeyPress="return ValidateAlpha(event);" require>
                      </div>
                    </div>
                    <div class="col-md-5 pl-1">
                      <div class="form-group">
                        <label for="contactnamel">Contact Name</label><span style="color:red;"> *</span>
                          <input class="form-control" id="contact_name" name="contact_name" type="text" placeholder="Enter Contact Name">
                      </div>
                    </div>
                  </div>
                  <div class="row">         
                     <div class="col-md-4 pr-1">
                      <div class="form-group">
                        <label for="businesstypel">Business Type</label><span style="color:red;"> *</span>
                        <select class="form-control" id="busin_contract" name="busin_contract">
                         <option value="">Select</option>
                        <?php 
                        foreach($business_types as $business_type)
                        { ?><option value="<?php echo $business_type->business_type_id; ?>"><?php echo $business_type->business_type; ?></option>';
                        <?php }
                        ?>
                        </select>
                        <?php //echo form_dropdown('business_type', $business_type, '', 'id="businesstype" class="form-control"');?> 
                      </div>
                    </div>
                    <div class="col-md-4 px-1">
                      <div class="form-group">
                        <label for="businesslinel">Line of Business</label><span style="color:red;"> *</span>
                        <select class="form-control" id="lob_contract" name="lob_contract">
                         <option value="">Select</option>
                        <?php 
                        foreach($line_of_businesss as $line_of_business)
                        { ?><option  value="<?php echo $line_of_business->line_of_business_id; ?>" data-prefix="<?php echo $line_of_business->contract_prefix; ?>">
                            <?php echo $line_of_business->line_of_business; ?></option>';
                        <?php }
                        ?>
                        </select>
                        <?php //echo form_dropdown('line_of_business', $line_of_business, '', 'id="line_of_business" class="form-control"');?> 
                      </div>
                    </div>
                    <div class="col-md-2 px-1">
                      <div class="form-group">
                        <label for="invoicingfreq1">Invoicing Frequency</label><span style="color:red;"> *</span>
                        <select class="form-control" id="invfreq_contract" name="invfreq_contract">
                         <option value="">Select</option>
                        <?php 
                        foreach($invoicing_freqs as $invoicing_freq)
                        { ?><option value="<?php echo $invoicing_freq->invoicing_freq_id; ?>"><?php echo $invoicing_freq->invoicing_freq; ?></option>';
                        <?php }
                        ?>
                        </select>
                        <?php //echo form_dropdown('invoicing_freq', $invoicing_freq, '', 'id="invoicing_freq" class="form-control"');?> 
                      </div>
                    </div>
                    <div class="col-md-2 pl-1">
                      <div class="form-group">
                        <label for="phonenol">Phone Number</label><span style="color:red;"> *</span>
                      <input class="form-control" id="contract_phoneno" name="contract_phoneno" type="text" placeholder="Enter Phone Number" 
                      onkeyup="formatMobile(this);"  >
                      </div>
                    </div>

                  </div>                  
                   <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="contractAddressl">Address</label><span style="color:red;"> *</span>
                       <textarea class="form-control"  name="contractAddress" id="contractAddress" placeholder="Enter Address"></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-4 pr-1">
                      <div class="form-group">
                        <label for="cityl">City</label><span style="color:red;"> *</span>
                         <select class="form-control" id="contract_city" name="contract_city">
                         <option value="">Select</option>
                        <?php 
                        foreach($citys as $city)
                        { ?><option  value="<?php echo $city->city_id; ?>"><?php echo $city->city; ?></option>';
                        <?php }
                        ?>
                        </select>
                        <?php //echo form_dropdown('city', $city, '', 'id="city" class="form-control"');
                        //foreach($citys as $city){
                        ?> 
                      </div>
                    </div>
                    <div class="col-md-4 px-1">
                      <div class="form-group">
                        <label for="ccmonth">Start Date</label><span style="color:red;"> *</span>
                       <input class="form-control contractDate" id="contractStartdate"  name="contractStartdate" readonly>
                      </div>
                    </div>
                    <div class="col-md-4 pl-1">
                      <div class="form-group">
                       <label for="ccyear">End Date</label><span style="color:red;"> *</span>
                      <input class="form-control contractDate" id="contractenddate" name="contractenddate" readonly>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-3 pr-1">
                      <div class="form-group">
                        <label for="contractpricel">Price</label><span style="color:red;"> *</span>
                         <input class="form-control" id="contract_price" name="contract_price" type="text" 
                         placeholder="0.00">
                      </div>
                    </div>
                    <div class="col-md-3 px-1">
                      <div class="form-group">
                        <label for="vatl">VAT</label>
                        <input class="form-control" id="contract_vat" data-value="5" placeholder="0.00" readonly>
                      </div>
                    </div>
                    <div class="col-md-3 pl-1">
                      <div class="form-group">
                        <label for="totalamtl">Total Amount</label>
                          <input class="form-control" id="contract_totamt"  placeholder="0.00" readonly>
                      </div>
                    </div>
                    <div class="col-md-3 pl-1">
                      <div class="form-group">
                        <label for="contractemail1">Email ID</label>
                          <input class="form-control" id="contract_email" name="contract_email">
                      </div>
                    </div>
                  </div>
                 <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <label for="contractscopel">Scope of Work</label><span style="color:red;"> *</span>
                       <textarea class="form-control" name="contractscope" id="contractscope" placeholder="Content..."></textarea>
                      </div>
                    </div>
                  </div>
                   <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                       <label for="contractremarksl">Remarks</label>
                       <textarea class="form-control" id="contractRemarks" placeholder="Content..."></textarea>
                      </div>
                    </div>
                  </div>
                  <input id="contractID" type="hidden" value="">
                  <div class="row">
                    <div class="update ml-auto mr-auto">
                    <input type="submit" value="Save Contract" class="btn btn-success" id="savecontract">
                     <!-- <input type="submit" id="savecontract" value="Save Contract"  class="btn btn-primary btn-round">-->
                    </div>
                  </div>
                </form>
              </div>

单击"提交"按钮

$('#savecontract').on('click', function(event) {
       //event.preventDefault();
       $('#contract_form').validate({
    rules: {
      contract_customername: {
        required: true
      },
      contact_name: {
          required: true
      },
      contract_phoneno: {
          required: true
      },
      contractAddress: {
          required: true
      },
      contract_price: {
          required: true
      },
      contractscope: {
          required: true
      },
      contractenddate: {
        required: true  
      },
      contractStartdate: {
        required: true
      },
      busin_contract: {
      required: {
        depends: function(element) {
            return $("#busin_contract").val() == "";
        } }
      },
      lob_contract: { 
      required: {
        depends: function(element) {
            return $("#lob_contract").val() == "";
        } }
      },
      invfreq_contract: {
      required: {
        depends: function(element) {
            return $("#invfreq_contract").val() == "";
        } }
      },
      contract_city: {
      required: {
        depends: function(element) {
            return $("#contract_city").val() == "";
        } }
      },  

    },
    messages: {
      contract_customername: {
        required: "Required"
    },
    contact_name: {
        required: "Required"
    },
    contract_phoneno: {
        required: "Required"
    },
    contractAddress: {
        required: "Required"
    },
    contract_price: {
        required: "Required"
    },
    contractscope: {
        required: "Required"
    },
    contractStartdate: {
      required: "Please select start date",
     },
     contractenddate: {
      required: "Please select end date",
     }, 
    busin_contract: {
      required: "Please select business type",
     },
     lob_contract: {
      required: "Please select line of business",
     },
     invfreq_contract: {
      required: "Please select invoicing frequency",
     },
     contract_city: {
      required: "Please select city",
     },
  },
        submitHandler: function(form) {
       var contract_customername = $('#contract_customername').val();
       var contact_name = $('#contact_name').val();
       var businesstype = $("#busin_contract option:selected").val();
       var lineofbusiness = $("#lob_contract option:selected").val();
       var lineofbusiness_prefix = $("#lob_contract option:selected").attr('data-prefix');
       var invoicingfrequency = $("#invfreq_contract option:selected").val();
       var contract_city = $("#contract_city option:selected").val();
       var contract_phoneno = $('#contract_phoneno').val();
       var contractAddress = $('#contractAddress').val();
       var contractStartdate = $('#contractStartdate').val();
       var contractStartdate_split = contractStartdate.split("-").reverse().join("-");
       var arr = contractStartdate_split.split('-');
       var startyear = arr[2]; // for contract id set
       alert(startyear)
       var contractenddate = $('#contractenddate').val();
       var contractenddate_split = contractenddate.split("-").reverse().join("-");
       var contract_price = $('#contract_price').val();
       var contract_vat = $('#contract_vat').val();
       var contract_totamt = $('#contract_totamt').val();
       var contractscope = $('#contractscope').val();
       var contractRemarks = $('#contractRemarks').val();
       var contract_email = $('#contract_email').val();
       var contract_no = lineofbusiness_prefix.concat('/', startyear, '/');

        $.ajax({
   type: "POST",
   url: 'contract_submitted',
   data: {
       getcontract_no: contract_no,
       getcontract_customername: contract_customername,
       getcontact_name: contact_name,
       getbusinesstype: businesstype,
       getlineofbusiness: lineofbusiness,
       getinvoicingfrequency: invoicingfrequency,
       getcontract_city: contract_city,
       getcontract_phoneno: contract_phoneno,
       getcontractAddress: contractAddress,
       getcontractStartdate: contractStartdate_split,
       getcontract_email: contract_email,
       getcontractenddate: contractenddate_split,
       getcontract_price: contract_price,
       getcontract_vat: contract_vat,
       getcontract_totamt: contract_totamt,
       getcontractscope: contractscope,
       getcontractRemarks: contractRemarks
   },
    success:  function(data){
        /*var aftersave_getvalue = $.parseJSON(data);
       //console.log(aftersave_getvalue);
       $('#contractID').val(aftersave_getvalue.Contract_id);

       */
      // 
     var getcontractid = data.replace(/"/g, "");

      //console.log(JSON.stringify(data));
      // console.log(data.contractsdetails); //<<-- Comes back undefined
      //  console.log(data.contractsdetails);

     //  confirmDialog();
     $('#contract_no').val(contract_no + getcontractid);

     $('#confirm').modal({
                    backdrop: 'static',
                    keyboard: false
                })
                .on('click', '#yesconfirm', function(e) {

    $('#contractnumber_aftersave').val(contract_no + getcontractid); //hidden value
    $('#activityarea').show();
    $('#showcontractno').show();
    $('#contract_no_activi').val(contract_no + getcontractid);
    $('#savecontract').prop('disabled', true);
    $('html, body').animate({
        scrollTop: $('#activityarea').offset().top
    }, 'slow'); 
                }).on('click', '#noconfirm', function(e) {
                    location.reload();
                });
       //alert(data);  


    } 
  });
}
    });
    });

Answer 1

在单击'clear''时重置两个日期输入，在下面的示例中给他们一个类 - 我使用的'.contractdate'。这使您可以调用datePicker的选项方法，并将" Mindate"one_answers" MaxDate"属性重置为null。

更新：对于格式'dd-mm-yy'，在输入值传递给Mindate/MaxDate属性之前，在输入值上运行datePicker的静态方法'parsedate'。

var dateFormatSetting = 'dd-mm-yy';
$("#contractStartdate").datepicker({
  numberOfMonths: 1,
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  closeText: 'Clear',
  dateFormat: dateFormatSetting,
  onSelect: function(selected) {
    var formattedDate = $.datepicker.parseDate( dateFormatSetting, selected);
    $("#contractenddate").datepicker("option", "minDate", formattedDate);
  },
  onClose: onContractDatePickerClose
});
$("#contractenddate").datepicker({
  numberOfMonths: 1,
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: dateFormatSetting,
  closeText: 'Clear',
  onSelect: function(selected) {
    var formattedDate = $.datepicker.parseDate( dateFormatSetting, selected);
    $("#contractStartdate").datepicker("option", "maxDate", formattedDate);
  },
  onClose: onContractDatePickerClose
});
function onContractDatePickerClose() {
  var event = arguments.callee.caller.caller.arguments[0];
  if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
    $('.contractDate').val('').datepicker('option', {
      minDate: null,
      maxDate: null
    });
  }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </style>
</head>
<body>
  <form>
    <label for="contractStartdate">start date</label>
    <input type="text" id="contractStartdate" class="contractDate" readonly>
    <label for="contractenddate">end date</label>
    <input type="text" id="contractenddate" class="contractDate" readonly>
    <input type="submit" value="submit">
  </form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</body>
</html>