Ajax form submissiona and html5 validation

I am using ajax to submit some form information and I also want to use html5 validation required for my fields.  The code below shows how I am sending my ajax and it works fine.  I just do not know how to check the validation before the ajax starts.
Thanks

$(document).on('click', '#bill_to_update', function() {	//ajax udate bill to address							   
			 
	var first_name = $('#first_name').val();
	var last_name = $('#last_name').val();
	var address_1 = $('#address_1').val();
	var address_2 = $('#address_2').val();
	var city = $('#city').val();
	var state = $('#state').val();
	var zip = $('#zip').val();
	var address_id = $('#address_id').val();
	var bill_to_update = "yes";
				
   $('#payment_advanced_box').show().html('<div style="margin-top:15px;"><img src="/loading_25_black.gif"/></div>');
   var url = "/checkout_payment_advanced_include.php";

    $.post(url, {firstName: first_name, lastName: last_name, address1: address_1, address2: address_2, City: city, State: state, Zip: zip, addressID: address_id, billToUpdate: bill_to_update} ,function(data) {
    $('#payment_advanced_box').html(data).show();        
	})
   	
});

Open in new window

LueyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Attach your ajax routine to the form submit action, not a button click i.e. capture when the form is being submitted, prevent the default submission and process your ajax.
I assume you are currently capturing the submit button click.
The form will never submit while HTML5 form validation fails.

e.g.
$("#myform").submit(function(e) {
         e.preventDefault()
         $.ajax({...

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
HTML5 validation can function without javascript - the browser will do this for you. Just add the required attribute to the required fields - see sample below.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('form').submit(function(){
        alert('if you get here the data is valid');
        // do your ajax stuff here
        return false;
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
    Some value<input type="text" id="fred" required="required"> <br/>
    Some choice <select id="bob" required="required"> <br/>
        <option value="" selected="selected"> Select an option </option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select> <br/>
    <input type="submit" />
</form>
</body>
</html>

Open in new window

0
LueyAuthor Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.