如何防止表单提交在字段上点击输入？ [复制]
Posted
技术标签:
【中文标题】如何防止表单提交在字段上点击输入？ [复制]【英文标题】：how to do prevent form submit from hit enter on the fields? [duplicate] 【发布时间】：2019-11-05 18:19:38 【问题描述】：当在任何输入字段表单上按回车键时，表单会被提交并调用 AJAX。单击提交按钮时，我需要调用 ajax。
请检查我的html代码。这里我使用了表单标签和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);
);
);
);
【问题讨论】：
HTML 标记在哪里？当您遗漏了所有相关的验证代码时，我们应该如何解决验证问题？也许有一个look at the documentation and try a validation reset。 你的 Datepicker 代码在哪里？ 这不是 datepicker 问题 不仅日期选择器输入..当在输入字段上按回车键时..表单是自动提交的。我需要避免这种情况.. Datepicker 问题是您原始问题的一部分。如果您有其他问题，您应该单独发帖。 【参考方案1】：要在单击“清除”时重置两个日期输入，请给它们一个类——我在以下示例中使用了“.contractDate”。这允许您调用 Datepicker 的选项方法并将 'minDate' 和 '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>【讨论】：
我需要像 dd-mm-yy 这样的日期格式..当我使用这种格式时...验证不起作用 我试图改变 var dateFormatSetting = 'mm-dd-yy';到 dd-mm-yy 但开始日期结束日期验证未显示 您需要使用 Datepicker 的一种方法解析日期以使该格式正常工作。请查看更新后的答案。 当我在输入字段上按回车时，它正在发生提交..并显示表单验证错误消息 为了消除此类问题，我添加了此代码 $(window).keydown(function(event) if(event.keyCode == 13) event.preventDefault(); return false; );以上是关于如何防止表单提交在字段上点击输入？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章