Ajax code sending form data to PHP server for validation

Question

I'm having a difficult time implementing this AJAX code into my form so that the page doesn't need to reload but will still perform server-side validation. I'm new to AJAX and PHP, so I'm working off a couple form templates, but I have been working on this for hours and I can't figure out why it's not working. Any help would be appreciated.

Here's a portion of the HTML code:

<div id="popupContact">
 <form id="formElem" name="formElem" action="" method="post">
     <fieldset class="step">
          <legend>Personal Details</legend>
          <p>
              <label for="firstname">First Name</label><em>*</em>
              <input id="firstname" name="firstname" />
          </p>
          <p>
              <label for="lastname">Last Name</label><em>*</em>
              <input id="lastname" name="lastname" />
          </p>
          <p>* fields are required</p>
      </fieldset>
      <fieldset class="step">
          <legend>Confirm</legend>
      <p>Before you submit your information, please ensure that each step
    below has this <img src="../img/global/checked.png" alt="Complete" >
    above them. If there is a step that has this 
    <img src="../img/global/error.png" alt="Error" >, please click on that tab
    and review the information to ensure it is correct and complete. Thank you.</p>
    <p>
                <label for="human">Please Type: "Something"</label><em>*</em>
                <input id="human" name="human" />
            </p>
            <p class="submit">
                <button id="registerButton" type="submit">Submit</button>
            </p>
        </fieldset>
   </form>
</div>

Here's the JAVAScript code:

$(function() {
var form = $("#formElem");
var fname = $("#firstname");
var lname = $("#lastname");
var address = $("#streetaddress");
var city = $("#city");
var state = $("#state");
var phone = $('#phone');
var email = $('#email');
var insurance = $('#insurance');
var license = $('#license');
var human = $('#human');
$('#registerButton').bind('click',function(){
    if($('#formElem').data('errors')){
        alert('Please correct the errors in the Form');
        return false;
    }
    else {
        var dataString = 'fname='+$('#firstname').val()+'&lname='+$('#lastname').val()+'&address='+$('#streetaddress'.val())+'&city='+$('#city')+'&state='+$('#state').val()+'&phone='+$('#phone').val()+'&email='+$('#email').val()+'&insurance='+$('#insurance').val()+'&license='+$('#license').val()+'&human='+$('#human').val();
        $.ajax({
        type: "POST",
        url: "js/validation.php",
        data: dataString,
        async: false,
        success: function() {
                $('#popupContact').html("<div id='message'></div>");
                $('#message').html("<h2>Inquiry Submitted!</h2>")
                .append("<p>We will be in touch soon.</p>")
                .hide()
                .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='..img/global/check.png' />");
                });
        }
    });
    return false;
    }
 });

And here's the PHP code:

<?php
if(isset($_POST['email'])) {
$email_to = "[email protected]";
$email_subject = "Inquiry";
function died($error) {
    // your error code can go here
    echo "We are very sorry, but there were error(s) found with the form you submitted. ";
    echo "These errors appear below.<br /><br />";
    echo $error."<br /><br />";
    echo "Please go back and fix these errors.<br /><br />";
    die();
}

// validation expected data exists
if(!isset($_POST['firstname']) ||
    !isset($_POST['lastname']) ||
    !isset($_POST['email']) ||
    !isset($_POST['phone']) ||
    !isset($_POST['streetaddress']) ||
    !isset($_POST['city']) ||
    !isset($_POST['state']) ||
    !isset($_POST['insurance']) ||
    !isset($_POST['license']) ||
    !isset($_POST['human'])){
    died('We are sorry, but there appears to be a problem with the form you submitted.');      
}

$firstname = $_POST['firstname']; // required
$lastname = $_POST['lastname']; // required
$emailfrom = $_POST['email']; // required
$phone = $_POST['phone']; // required
$address = $_POST['streetaddress']; //required
$city = $_POST['city']; //required
$state = $_POST['state']; //required
$insurance = $_POST['insurance']; //required
$license = $_POST['license']; //required
$human = $_POST['human']; //required

$error_message = "";
$email_exp = '/^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/';
if(!preg_match($email_exp,$emailfrom)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}

$email_message = "Form details below.\n\n";

function clean_string($string) {
  $bad = array("content-type","bcc:","to:","cc:","href");
  return str_replace($bad,"",$string);
}

$email_message .= "First Name: ".clean_string($firstname)."\n";
$email_message .= "Last Name: ".clean_string($lastname)."\n";
$email_message .= "Email: ".clean_string($emailfrom)."\n";
$email_message .= "Telephone: ".clean_string($phone)."\n";
$email_message .= "Address: \n".clean_string($address)."\n";
$email_message .= "".clean_string($city).", ";
$email_message .= "".clean_string($state)."\n";
$email_message .= "Have Insurance: ".clean_string($insurance)."\n";
$email_message .= "Have License: ".clean_string($license)."\n";


// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers); 
?>

<!-- include your own success html here -->

Thank you for contacting us. We will be in touch with you very soon.

<?php
}       
?>

I left out most of the actual validation code part of it, so I know that what you see isn't complete. What I don't understand is that without the AJAX part of this, the form validation works just fine-client and server-side, but when I add the AJAX, something's not connecting. Thanks for your help in advance.

EDIT Does anyone have a suggestion as to where my code is going wrong?

EDIT Okay, so if I put js/validation.php in the action="" tag for the form and disable the AJAX part of the code, then validation works just fine, but I'm forwarded to a page that is just blank with the confirmation code. Does this shed any light on the issue? Really, any help is appreciated. I've tried using the tips given in the comments, but for some reason nothing happens. It looks like my page is refreshed, but no confirmation message, or anything. I am totally and completely lost.

This doesn't answer your validation question, but I'd like to point out that you can serialize the whole form in one pass with $.post("test.php", $("#testform").serialize());.. No need to get the value of each one and glue them back together as a string. — Stephen
– Stephen, Commented Aug 18, 2011 at 2:25
are you using your Apache error log and Firefox error console? invaluable for figuring out ajax errors. — jcomeau_ictx
– jcomeau_ictx, Commented Aug 18, 2011 at 2:27
@Stephen - So in this case I could rewrite that as: $.post("validation.php",$('#contact_form').serialize()); and get rid of the var dataString = blahblahblah; part? — Michael
– Michael, Commented Aug 18, 2011 at 2:29
@jcomeau_ictx I didn't know something like them were available. Do you happen to have instructions as to how to use them? — Michael
– Michael, Commented Aug 18, 2011 at 2:31

bpeterson76 · Accepted Answer · 2011-08-18 04:01:30Z

You're not far off, but I think I'd attack this in a slightly less aggressive manner.

Starting with the form, I'd just make it a form with an id, and park the submit button outside the form tags. Why? Because a button inside a form can have some undesirable effects (like submitting to a magical black hole) Less code = happy developer.
I'd catch the click on the button with a click handler. So:

$('#registerButton').click(function(){ Do your ajax here });
I'd catch errors initially with front-end validation, because it saves server hits and is more pleasant from a UI standpoint. It's also faster....and no, it can't be entirely relied on because any competent person can override it, but it's a good first step. My personal favorite is here
In the click action, I'd use the ajax (like you have in your example) to submit the form to your script for validation. Serialize your form to send it in:
```
    $.ajax({
            type: "POST",
            url: "js/validation.php",
            data: $('#formElem').serialize(),
            ...
```
I'd have the script return a json string with a result case (true/false) and data to support that case (such as an id for success, and an array of the error cases for false) So, you're doing exactly right with your ajax call above, but return the data type for my example as json (not dataString) and add a var in the parens after success (let's use returndata as an example) Then, within your success callback, the returned data would be available as returndata.field (change field to equal the variable name in the json string) If it doesn't work, check the output on jsonlint.com
In the success of the ajax call from step 4, setup two cases (if/else). If your result case is true, let them proceed and indicate success as your UI dictates. If the result case is false, then iterate through the array of error cases to notify the user on each respective question.

You're almost there. If this is your first experience with jQuery AJAX, I'm really impressed!

That was exactly the guidance I needed. Thank you for taking the time to look over my code and write that. I really appreciate it!

streetlogics · Accepted Answer · 2011-08-19 15:11:58Z

1

I know you already accepted an answer, but I also wanted to suggest checking out the jQuery Validate plugin - http://bassistance.de/jquery-plugins/jquery-plugin-validation/ - no need to rewrite the wheel really. I personally use this plugin anytime I'm doing any type of client-side validation with jQuery. I mention this too because the plugin comes with a native "remote" validation type that you can use for any type of remote validation with a few simple lines of code. I've also read in some places that jQuery may start "officially" supporting the validation plugin at some point, so it can never hurt to start using it sooner than later. Just some food for thought!

answered Aug 19, 2011 at 15:11

streetlogics

4,74037 silver badges33 bronze badges

Collectives™ on Stack Overflow

Ajax code sending form data to PHP server for validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related