问题是当我点击按钮整页刷新时，当然我不想要，因为我试图通过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 -->
答案 0 :(得分：3)
替换所有这些......
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
只有这个...
$('#block-validate').valid();
当您只需使用the .valid() method时，无需触发提交即可让表单验证。它将在不提交表单的情况下触发验证。 （您应该编辑您的OP以提及jQuery Validate插件并显示代码。）
修改：
实际上，您的ajax()应该在submitHandler方法的.validate()回调范围内。 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放入 submitHandler方法中的.validate()回调中...
$('#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()
答案 1 :(得分：0)
您正在手动触发表单提交：
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
因为#block-validate是您的表单元素。
您正在尝试通过ajax提交表单，因此绝对没有理由手动触发表单提交。只需删除此块，发出ajax请求即可发布表单。
另请注意，e功能中的trigger变量不是您期望的表单提交事件，请查看trigger()上的手册。
答案 2 :(得分：-1)
为什么你甚至会触发提交？纯粹用于表单验证？
您需要真正重新创建验证。问题是，当您使用下面的preventDefault()和stopImmediatePropogation()时，您将完全取消绑定验证：
$('#block-validate').trigger('submit',function(e){
e.stopImmediatePropagation();
e.preventDefault();
});
你真的想重新验证表单（这是伪代码，几乎肯定不会起作用）。我无法分辨上面用于验证您的表单的内容，但如果您提供，我将为您编辑我的答案。
$('#createFormBtn').on('click', function(e){
$('#block-validate').validate()
//continue with rest of form submission