- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 .preventDefault() 进行浏览器表单验证时出现问题
有没有办法让浏览器检查所需输入的验证,但停止提交?
是否有任何标志可以用来获取表单是否有效?
谢谢
更新:同时使用主干和 jquery
events: {
"click #commentFormSubmit": "commentFormSubmit",
},
commentFormSubmit: function(el){
el.preventDefault();
var $el = $(el.target).parent();
// this.$el.find('button').prop('disabled', true).addClass('disabled');
var commentData = {};
commentData.name = this.$el.find('input[name=comment_name]').val();
commentData.country = this.$el.find('input[name=comment_country]').val();
commentData.email = this.$el.find('input[name=comment_email]').val();
commentData.comment = this.$el.find('textarea[name=comment_text]').val();
commentData.grade = this.$el.find('.commnt_grade:checked').val();
console.log('dd')
this.model.onSubmitComment(commentData);
},
和形式:
<form action="" class="" method="post">
<span>
<input type="text" name="comment_name" class="comment_input" placeholder="{{ 'your name'|_ }}" required>
<input type="text" name="comment_country" class="comment_input" placeholder="{{ 'country'|_ }}">
<input type="text" name="comment_email" class="comment_input" placeholder="{{ 'your email'|_ }}" required>
</span>
<textarea name="comment_text" id="comment_text" cols="30" rows="10" placeholder="{{ 'your comment'|_ }}" required></textarea>
<span class="grades">
<input type="radio" name="commnt_grade" class="commnt_grade" id="grade_1" value="1">
<label for="grade_1" class="selectGrades" data-eq="1"></label>
<input type="radio" name="commnt_grade" class="commnt_grade" id="grade_2" value="2">
<label for="grade_2" class="selectGrades" data-eq="2"></label>
<input type="radio" name="commnt_grade" class="commnt_grade" id="grade_3" value="3">
<label for="grade_3" class="selectGrades" data-eq="3"></label>
<input type="radio" name="commnt_grade" class="commnt_grade" id="grade_4" value="4">
<label for="grade_4" class="selectGrades" data-eq="4"></label>
<input type="radio" name="commnt_grade" class="commnt_grade" id="grade_5" value="5">
<label for="grade_5" class="selectGrades" data-eq="5"></label>
</span>
<button type="submit" id="commentFormSubmit">{{ 'submit'|_ }}</button>
</form>
最佳答案
如果您想在不提交的情况下进行验证,您可以通过调用 checkValidity
来让浏览器检查表单的有效性,并报告 通过调用reportValidity
验证有效性。 (在支持 HTML 验证的浏览器上。)
调用检查然后报告,而不提交:
yourFormElement.checkValidity();
yourFormElement.reportValidity();
示例:
$("input[type=button]").on("click", function() {
var yourFormElement = $("form")[0];
yourFormElement.checkValidity();
yourFormElement.reportValidity();
});
<form>
<input type="text" required>
<br><input type="text" required>
<br><input type="button" value="Click to check">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
您还可以在单个元素级别执行此操作:
yourInputElement.checkValidity();
yourInputElement.reportValidity();
示例:
$("input[type=button]").on("click", function() {
var yourInputElement = $("#second")[0];
yourInputElement.checkValidity();
yourInputElement.reportValidity();
});
<form>
<input id="first" type="text" required>
<br><input id="second" type="text" required>
<br><input type="button" value="Click to check second field only">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
既然您提到您正在使用 jQuery,我就强调这些是 DOM 元素的方法,而不是 jQuery 对象的方法。例如,如果您的表单有一个id
,并且您像这样查找它:
var $myForm = $("#the-form");
然后你会使用
$myForm[0].checkValidity();
$myForm[0].reportValidity();
不是
$myForm.checkValidity(); // Wrong
$myForm.reportValidity(); // Wrong
或者你可以给自己一个小插件:
jQuery.fn.checkValidity = function() {
var el = this[0];
return el && el.checkValidity();
};
jQuery.fn.reportValidity = function() {
var el = this[0];
return el && el.reportValidity();
};
这与 jQuery 的各种其他“getters”保持一致,因为它只查看 jQuery 对象内集合中的第一个元素。
关于javascript - PreventDefault() 停止表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44372822/
我正在尝试使用 this website 中的颜色 slider , 这是 source code .以下代码的作用是:line 134 if (e.preventDefault) e.prevent
在阅读有关 native 拖放事件的教程时,我遇到了一个检查 e.preventDefault 的条件语句。打电话前 e.preventDefault() .这个条件可以写成: e.preventDe
我只看到下面的代码here : function wheel(e) { preventDefault(e); } 以前我习惯这样使用: function wheel(e) { e.preven
这两者有什么区别吗?或者只是其中一个的缩写? e.preventDefault() and event.preventDefault() 最佳答案 好吧,唯一的区别是传递到监听器的事件对象的名称。如果
即使存在 preventdefault 和 returnvalue = false,表单仍会在 IE 中提交。在 Chrome 和 Firefox 中一切正常。 我也尝试过 event.stopPro
我有 2 个 jQuery 脚本 - 一个是在添加 .preventDefault 之前,另一个是在添加 .preventDefault 之后相同脚本的副本。 jQuery 在初始时可以工作,但在添加
我正在尝试解决 jQuery 教科书提供的问题。读起来是这样的 “即使没有进行任何输入,数据也会被提交,要解决此问题,您必须停止提交按钮的默认操作。为此,请在 if 语句末尾编写事件对象的 Preve
使用 .preventDefault() 进行浏览器表单验证时出现问题 有没有办法让浏览器检查所需输入的验证,但停止提交? 是否有任何标志可以用来获取表单是否有效? 谢谢 更新:同时使用主干和 jqu
我有以下代码: $(document).ready(function(){ $("div.subtab_left li.notebook a").click(function(event) {
有谁知道是否有办法阻止Default(),但是在计时器上,以便在一定时间后恢复默认操作? 这是我到目前为止所拥有的: function setResetInterval(bool){ var el
我正在构建一个带有基于触摸的下拉菜单的菜单,一切都工作得很好,除了当一个人单击父级时,我希望它只激活下拉菜单,而不是转到父级 href 中列出的链接。因此,我尝试使用 PreventDefault()
//prevent default handler function click_handler(event){ if(event.shiftKey){ even
我想删除标签重定向超链接。目前单击它会打开一个模式,但我不想重定向浏览器。我尝试了 preventDefault 但它对我不起作用。 我正在使用 C# MVC。可能是我其他地方重载了?或者有其他解决方
我有一个非常简单的表格: .... .... Submit 这是其背后的脚本: // Landing page form submit $("#formRegis
我遇到的情况是,我需要在单击链接时触发谷歌分析事件。我为此目的编写了一个处理程序: handleClick(e){ e.preventDefault(); // ---------------
我正在编写一个小脚本,当单击菜单项时,它基本上会切换子菜单。 我设法让它工作,但我有一个问题,我使用 PreventDefault 来实现该功能,因此当单击父链接时,会显示子菜单。 问题是,preve
我在理解 PreventDefault 函数的工作原理时遇到问题。我创建了一个简单的 jsfiddle,但是选择和扩展仍然有效并且没有被阻止。 http://jsfiddle.net/XRfKb/15
在 osx 10.6.8 上使用 chrome 15 当添加事件监听器时,我发现在使用 keypress 事件时将 preventDefault 放入,我会遇到很多问题。 Take a look he
我有这个列表采用不同的选项并根据单击的选项重新路由。 html代码为: Choose Page Page 1 Page 2
计划是将 id #required 设置为点击时的必填字段。这不起作用: $("#submitformat").click(function( event ) { $("#required").p
我是一名优秀的程序员,十分优秀!