gpt4 book ai didi

javascript - PreventDefault() 停止表单验证

转载 作者:行者123 更新时间:2023-12-03 22:40:22 28 4
gpt4 key购买 nike

使用 .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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com