preventDefault而不删除html5验证
preventDefault without removing html5 validation
我用标准html验证创建了以下表单。对于这个表单,我想避免在按下提交按钮时刷新页面。因此,在我的jquery代码中,我添加了preventDefault()
。哪些工作方式是不刷新页面,但它也删除了html5验证?我怎样才能同时应用这两种东西?
表单
<form method="post" action="">
<div class="reg_section personal_info">
<input type="text" name="username" id="title" value="" placeholder="title" required="required" maxlength="25">
<textarea name="textarea" id="description" value="" placeholder="Beskrivelse" required="required" minlength="100"></textarea>
</div>
<div>
<span class="submit" style="text-align: left; padding: 0 10px;"><input type="submit" id="insert" value="Tilføj"></span>
<span class="submit" style="text-align: right; padding: 0 10px;"><input TYPE="button" value="Fortryd" onclick="div_hide();"></span>
</div>
</form>
jquery
$("#insert").click(function(e) {
e.preventDefault(); // prevent default form submit
if(!$('#description').val() == "" && !$('#title').val() == "" && $('#description').val().length >= 100) {
div_hide();
$.post("insert.php",
{
title: $('#title').val(),
body: $('#description').val(),
longitude: currentMarker.lng(),
latitude: currentMarker.lat()
},
function (data) { //success callback function
}).error(function () {
});
}
});
在点击处理程序的顶部,您可以检查表单是否有效:
// prevent default form submit if valid, otherwise, not prevent default behaviour so the HTML5 validation behaviour can take place
if($(this).closest('form')[0].checkValidity()){
e.preventDefault();
}
-jsFiddle-
试试这个:
$( document ).ready(function() {
$("#insert").click(function(e) {
if($('#description').val() != "" && $('#title').val() != "" && $('#description').val().length >= 5) {
div_hide();
$.post("insert.php",
{
title: $('#title').val(),
body: $('#description').val(),
longitude: currentMarker.lng(),
latitude: currentMarker.lat()
},
function (data) { //success callback function
}).error(function () {
});
}
});
$("form").submit(function(e){
e.preventDefault();
});
});
并更改插入按钮类型以提交:
<input type="submit" id="insert" value="Tilføj"></span>
相关文章:
- 从所有元素中删除HTML5验证
- preventDefault而不删除html5验证
- 带有动态选择选项的Firefox html5验证异常
- 通用 jQuery,用于在 HTML5 验证后禁用所有表单上的提交按钮
- 是否可以忽略特定按钮的HTML5验证
- HTML5验证中漂亮的照片iframe的问题
- 有没有我可以听的事件发生在表单提交之后,并且在表单通过HTML5验证之后
- 以编程方式提交角度表单,但仍会收到 HTML5 验证错误
- HTML5 验证错误消息,未提交表单
- 使用 HTML5 验证多个电子邮件地址
- 制作/查找 html5 验证器书签
- HTML5验证和自定义自动对焦位置
- HTML5验证在backbone.js onclick路由到另一个视图中不起作用
- 将隐藏选项卡中的HTML5验证事件传递给JavaScript函数
- 如何在输入更改时显示HTML5验证消息
- 即使表单从未提交,也要使用html5验证
- 覆盖html5验证
- 为什么当我运行Jquery函数时会触发HTML5验证
- HTML5验证:设置自定义验证消息时的不同行为
- 使用带有jQueryValidate插件的HTML5验证消息