Question

使用.preventDefault（）

进行浏览器表单验证时遇到问题

有没有办法让浏览器检查所需输入的验证，但是停止提交？

如果表格有效，我可以使用任何标志吗？

由于

更新：同时使用backbone和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>

Answer 1

如果您想在不提交的情况下进行验证，可以通过在其上调用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对象中set中的第一个元素。

Answer 2

虽然@TJ在他的回答中提供了一个很好的解决方案，但是另一种方法是在使用submit时监听实际表单上的event.preventDefault()事件。这将允许触发表单验证，但阻止表单提交。

Answer 3

感谢@ T.J。克劳德为方向。至于我，它是一个解决方案，而不是一个解决方案。

commentFormSubmit: function(el){
    var $el = $(el.target).parent();    
    if ($el[0].checkValidity()){
        el.preventDefault();
        // 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();
        // this.model.onSubmitComment(commentData);
    }
    else $el[0].reportValidity();
},

再次，谢谢！

Answer 4

您可以始终使用HTML5表单验证属性，这会阻止您在表单数据无效时提交请求：

禁用
最大
分钟
图案
需要

因此您不需要阻止默认行为 - 在您拥有无效数据之前，使用无法提交表单。

<form action="/action_page_post.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

https://www.w3schools.com/js/js_validation.asp

preventDefault（）停止表单验证

4 个答案: