在Bootstrap Validator form中停止默认表单提交
Stopping default form submit in Bootstrap Validator Form
这个问题我已经问过几次了,但它们似乎不适用于我的情况。
我的表单在验证测试之前被提交。
形式:
<form accept-charset="UTF-8" action="/user/fact" data-bv-submitbuttons="button[type='submit']" data-remote="true" data-toggle="validator" id="user_fact_form" method="post" role="form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="form-group">
<label for="key">Title</label>
<input class="form-control" id="key" name="key" type="text" value="" />
</div>
<div class="form-group">
<label for="value">Value</label>
<input class="form-control" id="value" name="value" type="text" value="" />
</div>
<div class="form-group">
<input class="btn btn-primary" disable="true" name="commit" type="submit" value="Add" />
</div>
</form>
javascript:
$('#user_fact_form').bootstrapValidator({
live: 'enabled',
message: 'This value is not valid',
submitButton: '$user_fact_form button[type="submit"]',
submitHandler: function(validator, form, submitButton) {
$.post(form.attr('action'), form.serialize(), function (result) {
$("#facts_tbody").append(result.data);
});
return false;
},
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
key: {
selector: '#key',
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
}
}
},
value: {
selector: '#value',
validators: {
notEmpty: {
message: 'The value is required and cannot be empty'
}
}
}
}
});
有什么想法我可以禁用提交按钮,直到表单被验证?
最后,我需要做的是使用action="javascript:return;"
禁用表单操作,并使用Jquery AJAX方法来发布数据:
$('#user_fact_form').bootstrapValidator({
live: 'enabled',
message: 'This value is not valid',
submitButton: '$user_fact_form button[type="submit"]',
submitHandler: function(validator, form, submitButton) {
$.ajax({
type: 'POST',
url: 'my_form.url',
data: $(form).serialize(),
success: function(result) {
$("#facts_tbody").append(result);
$("#key").val('');
$("#value").val('');
$("#user_fact_form").data('bootstrapValidator').resetForm();
}
});
return false;
},
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
key: {
selector: '#key',
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
}
}
},
value: {
selector: '#value',
validators: {
notEmpty: {
message: 'The value is required and cannot be empty'
}
}
}
}
});
您需要这样做:
$("#yourform").submit(function(ev){ev.preventDefault();});
$("#submit").on("click", function(){
var bootstrapValidator = $("#yourform").data('bootstrapValidator');
bootstrapValidator.validate();
if(bootstrapValidator.isValid())
$("#yourform").submit();
else return;
});
我很少使用jQuery,所以我的语法知识很差,我自己编写验证脚本,所以我对Bootstrap Validator一无所知。但是在香草/原生Javascript中,您必须将input type="submit"
更改为input type="button" onclick="validateAndSend()"
。然后,该函数将包含提交命令。下面是一个演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Submit with/without validation</title>
</head>
<body>
<form name="theForm" action="form_data_handler.php">
<input type="text" name="firstField"><br>
<input type="button" value="Validate and send" onclick="validateAndSend()"><br>
<input type="submit" value="Just send">
</form>
<script>
function validateAndSend() {
if (theForm.firstField.value == '') {
alert('The first field is a required field.');
return false;
}
else
theForm.submit();
}
</script>
</body>
</html>
现场演示在这里:http://codepen.io/anon/pen/yDtab?editors=100。
相关文章:
- HTML表单提交时未执行外部函数
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 将图像上传ajax与表单提交ajax相结合
- Javascript无法处理表单提交
- 如何在我的情况下禁用表单提交
- 加载后的页面与ajax表单提交不起作用
- 表单提交后防止默认
- 使用jQuery切换根据选中的复选框隐藏/显示表单提交按钮 - 如何设置默认关闭的提交按钮
- 通过按钮/类型=“提交”行为恢复默认表单提交
- 阻止表单提交 预防默认问题
- 如何将块UI与setTimeout一起使用,并在表单提交时防止默认
- Javascript 表单提交 prevent默认在使用 AJAX 检索表单时不起作用
- 覆盖Magento中的默认数据表单提交JS活动
- 表单提交时,即使我使用阻止默认提交按钮点击
- 如何防止表单提交时出现默认情况
- 防止默认的表单提交事件从触发,如果javascript使用jquery启用
- 替换表单提交后的默认占位符
- 在Bootstrap Validator form中停止默认表单提交
- JQuery:如何在默认值未更改时禁用表单提交
- 为什么表单提交默认值被删除?