问题是当我单击按钮整个页面刷新时，这当然是我不希望的，因为我正在尝试通过 Ajax 提交表单。
$('#createFormBtn').on('click', function(e){
e.stopImmediatePropagation();
e.preventDefault();
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
var formData = {
FormName : $("#cFormName").val(),
FormPath : $("#cFormPath").val(),
FormCIPath : $("#cFormCIPath").val(),
TabID : $('#selectTab').val(),
TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
IsMenuLink : isMenuLink_createForm
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewForm/",
data: formData/*,
success: function(output){
if (output == true){
oTable.fnReloadAjax();
}
}*/
});
});
我添加了这段代码
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
因为我需要触发Submit ，因为我的表单中的验证不起作用。此按钮不在 <form> 内标签。
但现在它出现了问题，就好像我单击此按钮整个页面刷新一样。
HTML如果有人想看..
<div id="addNewFormModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i style='color: #666666' class='fa fa-edit fa-fw fa-1x'></i>Edit</h4>
</div>
<div class="modal-body">
<div class="body collapse in" id="div-1">
<form class="form-horizontal" id="block-validate">
<div class="form-group">
<label class="control-label col-lg-4" for="text1">Form Name</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formName" placeholder="Form Name" id="cFormName">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4" for="pass1">Form Path</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formPath" placeholder="Form Path" id="cFormPath">
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Form CI Path</label>
<div class="col-lg-8">
<input type="text" class="form-control required" name="formCIPath" placeholder="Form CI Path" id="cFormCIPath">
</div>
</div><!-- /.form-group -->
<div class="form-group" id="selectTab_MainDiv">
<label class="control-label col-lg-4">Select Tab</label>
<div class="col-lg-8" id="selectTabName">
<input type='hidden' class="required" name='selectTab' id='selectTab'/>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Have Parent</label>
<div class="col-lg-8" id="haveParentDiv">
<input class="make-switch" id="haveParent" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
</div>
</div><!-- /.row --><!-- /.row -->
<div class="form-group" id="selectParentMenu_MainDiv" style="display: none">
<label class="control-label col-lg-4">Parent Form</label>
<div class="col-lg-8" id="selectParentMenuDiv">
<input type='hidden' name='input' id='selectParentMenu'/>
</div>
</div>
<div class="form-group" id="selectTab_MainDiv">
<label class="control-label col-lg-4">Menu Order</label>
<div class="col-lg-8" id="selectMenuOrder">
<select class="commonGeneralSelect2 required" name="selectMenuOrder">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div><!-- /.form-group -->
<div class="form-group">
<label class="control-label col-lg-4">Show on Menu</label>
<div class="col-lg-8" id="isMenuLink_createSwitchDiv">
<input class="make-switch" id="isMenuLink_createSwitch" type="checkbox" data-on-color="success" data-on-text="Yes" data-off-text="NO" data-off-color="danger">
</div>
</div><!-- /.row --><!-- /.row -->
{{*<input type="submit" value="Validate" class="btn btn-primary">*}}
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="createFormBtn">Create</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --><!-- /#Edit Button Modal -->
最佳答案
替换所有这些...
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
只有这个...
$('#block-validate').valid();
当您只需使用 the .valid() method 时，无需触发提交来验证表单。 。它将在不提交表单的情况下触发验证。 (您应该编辑您的 OP 以提及 jQuery Validate 插件并显示代码。)
编辑:
实际上，您的 ajax() 确实应该位于 .validate() 方法的 submitHandler 回调中。 As per documentation ，这是“通过 Ajax 提交表单的正确位置...”。
因此，不要采用我上面提出的简单建议，而是这样做......
// click handler is needed since this button is not a 'submit' type button
$('#createFormBtn').on('click', function(e){
// block default action of button click
e.stopImmediatePropagation();
e.preventDefault();
// submit the form -> will validate AUTOMATICALLY
$('#block-validate').submit();
});
并将ajax放入您的.validate()方法中的submitHandler回调中...
$('#block-validate').validate({
// your other rules and options here,
submitHandler: function(form) { // only fires on valid form
var formData = {
FormName : $("#cFormName").val(),
FormPath : $("#cFormPath").val(),
FormCIPath : $("#cFormCIPath").val(),
TabID : $('#selectTab').val(),
TabName : $('#selectTabName div.select2-container a.select2-choice span.select2-chosen').text(),
MenuOrder : $('#selectMenuOrder div.select2-container a.select2-choice span.select2-chosen').text(),
IsMenuLink : isMenuLink_createForm
};
$.ajax({
type:"post",
url:"{{base_url()}}admin/configurations/addNewForm/",
data: formData
});
}
});
请注意，大多数人使用 jQuery .serialize()而不是手动创建一个数组，每个字段都附加到 .val()。
data: $(form).serialize()
关于javascript - e.preventdefault 提交时触发的提交不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25492352/