Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html5 form validation, void form action and execute jQuery when all html5 form elements are validated?

Tags:

html

jquery

forms

I have a simple HTML5 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");
        }
      }
    });
  });
});
like image 640
Rees Avatar asked Apr 16 '11 17:04

Rees


People also ask

How do I bypass HTML5 validations?

To ignore HTML validation, you can remove the attribute on button click using JavaScript. Uer removeAttribute() to remove an attribute from each of the matched elements.

How does HTML5 validation work?

HTML5 validation kicks in when the form is submitted (user clicks the Submit button). When this happens, the browsers starts going through its list of required inputs and prompts when the input is missing on the required inputs.

Does HTML5 have form validation?

Using HTML5, we can create a form with built in validation (i.e. no javascript required). Earlier, we were using JAVASCRIPT to control form validation.

Which are two HTML5 attributes that can be used to validate form data?

There are three categories of HTML5 form validation features: HTML attributes on <input> , <select> , and <textarea> elements. (From here on out, I will just refer to them all as <input> cause brevity) CSS pseudo selectors.


3 Answers

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
});
like image 177
Milimetric Avatar answered Oct 19 '22 00:10

Milimetric


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.

like image 20
Eduardo Antón Avatar answered Oct 19 '22 00:10

Eduardo Antón


Use:

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

    return false;
});
like image 4
Darm Avatar answered Oct 19 '22 01:10

Darm