preventDefault()停止表单验证 [英] preventDefault() stops form validation

问题描述

使用.preventDefault()进行浏览器表单验证时遇到问题

having a problem with browser form validation using .preventDefault()

是否可以让浏览器检查所需输入的验证，但停止提交?

Is there a way to let browser check validation of required inputs, but stops submit?

如果表单有效，是否可以使用任何标志?

Is there any flags I can use to get if form is valid?

谢谢

更新: 同时使用骨干网和jQuery

update: using both backbone and 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验证的浏览器上.)

If you want to validate without submitting, you can get the browser to check the validity of the form by calling checkValidity on it, and to report the validity by calling reportValidity. (On browsers that support HTML validation.)

先调用支票再生成报表，而无需提交:

Calling both checks and then reports, without submitting:

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>

您还可以在单​​个元素级别执行此操作:

You can also do it at the individual element level:

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，并且您看起来像这样:

Since you've mentioned you're using jQuery, I'll just emphasize that these are methods of the DOM element, not the jQuery object. So for instance, if your form has an id and you look it up like this:

var $myForm = $("#the-form");

然后您将使用

$myForm[0].checkValidity();
$myForm[0].reportValidity();

不是

$myForm.checkValidity();  // Wrong
$myForm.reportValidity(); // Wrong

或者您可以给自己一个小插件:

Or you could give yourself a little plugin for it:

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对象内部集合中的第一个元素.

That's in keeping with jQuery's various other "getters" in that it only looks at the first element in the set inside the jQuery object.

这篇关于preventDefault()停止表单验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！