Javascript preventDefault（）停止表单验证

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

{{‘提交’|}

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

• 残废
• 马克斯
• 闵
• 图案
• 必需的

所以，您不需要阻止默认行为—在您有无效数据之前，use无法提交表单

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

---

如果您想在不提交的情况下进行验证，您可以让浏览器通过调用

checkValidity

检查表单的有效性，并通过调用

reportValidity

报告有效性。（在支持HTML验证的浏览器上。）

调用两个检查，然后调用报告，但不提交：

yourFormElement.checkValidity();
yourFormElement.reportValidity();

例如：

$（“输入[type=button]”）。在（“单击”，函数（）{
var yourFormElement=$（“表单”）[0]；
yourFormElement.checkValidity（）；
yourFormElement.reportValidity（）；
});





感谢@T.J.Crowder的指导。
对我来说，这是一个解决方案，而不是一个解决方案

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();
},

再次感谢
 虽然@TJ在他的回答中提供了一个很好的解决方案，但另一种方法是使用
event.preventDefault（）
在实际表单上侦听
submit
事件。这将允许触发表单验证，但会阻止表单提交。
是否使用任何框架？还是纯JS？使用两个框架向我们展示您的代码。编辑后的问题。如果我有5个字段怎么办？@aleXela：在表单上调用它。奇怪的是，我刚刚意识到我没有这么说，并且正在按照你的评论编辑上面的内容；点击刷新。：-）没有简单的方法可以做到这一点？？连线。@aleXela:form元素上的两个函数调用有什么不简单的？出于某种原因，我尝试使用checkValidity（），但它不起作用。我想我引用了错误的对象。我需要为所有输入对象运行此代码。