Geek Answers Handbook

How to submit data after form has been validated using jQuery?

I have a simple email registration form:

<form action="" id="newsletterform" method="get"> <input type="text" name="email" class="required email" id="textnewsletter" /> <input type="submit" id="signup" /> </form>

Here I want:

  • Confirm the form to find a blank line or an incorrectly filled in email address that the user clicks on or hits.
  • If one of the above events (empty string, etc.), I would like to create an error to inform the user.
  • Then, as soon as the user fills out a correctly formed email address and sends a request (or enter), I want the form to send the email address to the place I specify in jQuery code, and then create a little "Thanks for registering", without rebooting browser.

I looked through too many textbooks, and at this point my eyes are very sore, so please do not point me to any URLs (I most likely was there).

If someone could provide a barebone diagram of what to do, that would be so much appreciated.

+4
source share
3 answers

First, make sure that you do all your server-side validation. I like when my forms work without any JavaScript. I guess you have done so much.

**** ORIGINAL RESPONSE ***

Then change the "Submit" element to the button element. In the OnClick button element, run a JavaScript function that validates. Lots of samples on how to do this, as you know.

If verification fails, send alerts. If successful, use JavaScript to submit the form.

**** NEW, TOOL USING ANSWER ***

You can also use jQuery as (orip points), and these are plugins to do this. They do the hard work. Please make sure my comments tell the correct story. this code also provides AJAX.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Load JQuery on your page --> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- Load JQuery validation sytles and (rules?) on your page --> <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" /> <!-- Load JQuery validation plugin on your page --> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <!-- Load JQuery form plugin on your page --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js"></script> <script type="text/javascript" language="javascript"> //Wait until the document is loaded, then call the validation. Due to magic in JQuery or the plugin // this only happens when the form is submitted. $(document).ready(function(){ //When the submit button is clicked $("#signup").click(function() { //if the form is valid according to the fules if ($("#newsletterform").valid()) { //Submit the form via AJAX $('#newsletterform').ajaxForm(function() { //this alert lets me know the submission was successfull alert("Thank you!"); }); } }) }); </script> <!-- Just some styles --> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { font-weight: bold; padding-right: 1em; vertical-align: top; } </style> </head> <body> <form action="" id="newsletterform" method="get"> <!-- The classes assigned here are where the validation rules come fome. This is required, and it must be an email --> <input type="text" name="email" class="required email" id="textnewsletter" /> <input type="submit" id="signup" /> </form> </body> </html>

This is not the hardest code you could write, but it will serve as an example.

+7
source

Use the jQuery validation plugin .

With it, you do not need to change the form - it will be sent only if the verification has passed. This can save you a lot of time and complexity.

Edit:

To prevent the page from reloading, use the " submitHandler " plugin parameter to send it yourself:

 $('#myform').validate({ // ... submitHandler: function() { alert("submitted"); } });

or use the jQuery Form Plugin , which converts your form into an AJAX view - the Validation plugin integrates with it.

+4
source

Thank you all for your help.

I have a solution that works fine the way I want (had to hire someone :) - Anywho, for someone who needs it, here you go:

 $(document).ready(function () { $('#textnewsletter').click(function () { if($('#textnewsletter').val()=='Your email address') $(this).attr("value",''); }); $('form#newslattersub').submit(function () { if(!isEmail($('#textnewsletter').val() )) { $('p.idmsg').html('<span class="error">Please enter a valid email address</span>').hide().fadeIn("slow"); } else{ $.post($('form#newslattersub').attr('action'), { email:$('#textnewsletter').val() },function(data){ $('p.idmsg').html('<span class="success">Thanks for signing up! Please check your email for confirmation!</span>').hide().fadeIn("slow"); //alert("server return " + data); }); } return false; }); });
0
source

More articles:


All Articles