PreventDefault () stops form validation

Question

PreventDefault () stops form validation

problem with browser form validation using .preventDefault ()

Is there a way for the browser to check if the required data is entered correctly, but stops sending?

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

thank

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

and the form:

    <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>

+3

javascript jquery validation forms

aleXela 05 june 17 at 15:54

source to share

3 answers

TJ Crowder · Answer 1 · 2017-06-05T16:05:12+0000

If you want to perform validation without submitting, you can force the browser to validate the form by calling on it checkValidity

and validate it by calling reportValidity

. (In browsers that support HTML validation.)

Calling both checks and reports, without sending:

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

Example:

$("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>

Run code Hide result

You can also do this at the level of individual elements:

yourInputElement.checkValidity();
yourInputElement.reportValidity();

Example:

$("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>

Run code Hide result

Since you mentioned that you are using jQuery, I just want to emphasize that these are methods on the DOM element, not a jQuery object. So, for example, if your form has id

, and you look like this:

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

then you would use

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

not

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

According to jQuery, various other "getters" are that it only looks at the first element in a set inside a jQuery object.

aleXela · Answer 2 · 2017-06-05T16:39:21+0000

Thanks for @TJ Wheel for direction. since for me this is a fix, not a solution.

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

Thanks again!

VadimB · Answer 3 · 2017-06-05T16:01:06+0000

You can always rely on HTML5 form validation attributes to prevent you from submitting your request if there is invalid form data:

disabled
Max
min
template
required

This way, you don't have to prevent the default behavior - use cannot submit the form until you receive invalid data.

<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 () stops form validation

More articles: