How can I void a form action and execute jQuery when all HTML form elements are validated?

Question

I have a simple HTML form that I want to leverage for required field validation. My issue is that I want to use the HTML5 form validation BUT at the same time avoid actually submitting the form because I want to execute a jQuery Ajax call instead. I know you can disable html5 validation, but I want to keep this as my primary method of form validation instead of a jQuery plugin.

Any thoughts?

HTML

<form action="donothing" id="membershipform" method="get" accept-charset="utf-8">
    <input type="text" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="first and last name" required>
    <input type="email" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="email" required>
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="phone" required>    
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="mailing address" required>      
    <input type="phone" class="borderr3 innershadow3" name="some_name" value="" id="some_name" placeholder="how you heard about us" required>
    <p>
        <input type="submit" id="submitbtn" class="submitbtn" value="Continue" style="width:265px">
    </p>
</form>

JavaScript:

$(function(){
  $("#submitbtn").click(function(){
    $.ajax({
      url: "<?php bloginfo('template_url') ?>/ajax-membership.php",
      success: 
      function(txt){
        if(txt){
          $("#thankyou").slideDown("slow");
        }
      }
    });
  });
});

score 57 · Accepted Answer · edited May 23 '17 at 10:29

57

According to this: Do any browsers yet support HTML5's checkValidity() method?, and this may not be the latest truth since HTML5 is a work in progress, the Form.checkValidity() and element.validity.valid should let you access validation information from JavaScript. Assuming that's true, your jQuery would need to attach itself to the form submit and make use of that:

$('#membershipform').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do whatever you want here
});

edited May 23 '17 at 10:29

Community

1
1

answered Apr 16 '11 at 18:57

Milimetric

13,411
4
44
56

To all readers: MAKE SURE to include the event parameter in the function, otherwise this WILL NOT work in Firefox. – Marcel Gruber Mar 26 '15 at 21:42
1

@Max, do you mean to make sure to pass the `event` parameter to the callback function? If so, yes, that's certainly required in all browsers as you couldn't call `preventDefault` otherwise. – Milimetric Mar 26 '15 at 22:05
Yes. Just as a reminder. I wasted a good bit of time trying to figure out why it wasn't working after just using the `event.preventDefault();` and not the rest of the example. Even without the `event` parameter, it still seemed to behave as desired on Chrome, but not Firefox. – Marcel Gruber Mar 26 '15 at 22:14
1

@Max - what you might have there is that Chrome automatically has some automatic validation behavior that also prevents the submitting of the form. So this code would not be needed at all, but `event.preventDefault()` would throw an error on the console if you were using it without `event` being defined. So make sure to keep that console open. Stay safe out there! :) – Milimetric Mar 27 '15 at 12:11

score 14 · Answer 2 · answered Oct 30 '19 at 08:47

14

You can use html5 form validation from javascript, only call to method reportValidity()

In your example:

<script>
    document.querySelector('#membershipform').reportValidity()
</script>

reportValidity run html5 form validation and return true/false.

answered Oct 30 '19 at 08:47

Eduardo Antón

141
1
3

score 4 · Answer 3 · answered Sep 21 '17 at 15:28

This is a subtle leverage of default behaviour and javascript to create what you want.

var form = document.getElementById("purchaseForm");
if(form.checkValidity()){
    console.log("valid");
    e.preventDefault();
}else{
    console.log("not valid");
    return;
}

If the form is valid then preventDefault() and continue with your function (e.g. send over ajax). If not valid then return without preventing default, you should find the default actions for form validation occurs on your form inputs.

This worked for me. It helped me check if all input fields were valid. I did not use `e.preventDefault();`, instead, I put my code that stored the form in the `if` statement. — Vini, Sep 08 '19 at 20:13

score 4 · Answer 4 · answered Aug 09 '11 at 22:04

4

Use:

$('#membershipform').submit(function(){
    // do whatever you want here

    return false;
});

answered Aug 09 '11 at 22:04

Darm

5,581
2
20
18

3

This won't work if the code above the return statement throws an error. In case of an error the form still go to the address specified in the "action" attribute. – Stan Jan 11 '13 at 00:28
Yes! this works if I want my form to go through the validation part but not submit. good job – Sando K Jan 09 '16 at 18:00

score 1 · Answer 5 · edited Apr 18 '18 at 17:56

1

Using pure java script

<script>

    document.getElementById('membershipform')
        .addEventListener("submit", 
            function(event) {
                event.preventDefault();

                // write stuff

            });

</script>

edited Apr 18 '18 at 17:56

J.D. Mallen

4,339
3
22
33

answered Dec 07 '16 at 05:34

Chirag

1,478
16
20

How can I void a form action and execute jQuery when all HTML form elements are validated?

5 Answers5

Linked

Related