Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have a simple email address sign up form as follows:

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

Here's what I want to be able to do:

  • Validate the form to look for an empty string or a incorrectly filled out email address one the user clicks submit or hits enter.
  • If one of the above happens (empty string etc), I would like to generate an error to let the user know.
  • Then once the user fills out a correctly formed email address and hits submit (or enter) I want the form to send the email address to wherever I specify in the jQuery code and then generate a little "Thank you for signing up notice", all without reloading the browser.

I have looked at too many tutorials and my eyes are pretty much aching at this stage, so please don't point me to any urls (I most likely have been there).

If someone could provide a barebone outline of what to do It would be so much appreciated.

like image 802
Keith Donegan Avatar asked Dec 10 '08 18:12

Keith Donegan


2 Answers

First, please be sure you do all of your validation on the server-side. I like to get my forms working without any JavaScript whatsoever. I am assuming you have done that much.

****ORIGINAL ANSWER***

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

If the validation fails, send up alerts. If it is successful, use JavaScript to submit the form.

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

You can also employ JQuery as (orip points out) and it's plugins to do this. They handle a lot of the hard work. Please make sure my comments are telling the correct story. this code also does the AJAX submitting.

<!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 isn't the tightest code you could write, but it will serve as an example.

like image 133
MrChrister Avatar answered Nov 01 '22 14:11

MrChrister


Use the jQuery Validation Plugin.

With it you don't need to modify your form - it will only be submitted if validation passes. It could save you a lot of time and complexity.

Edit:

To prevent the page reloading, either use the plugin's "submitHandler" option to submit yourself:

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

or use the jQuery Form Plugin that converts your form submission to an AJAX submission - the Validation plugin integrates with it.

like image 38
orip Avatar answered Nov 01 '22 13:11

orip