Validating PHP form and change submit button instead of redirect to status page

I have a basic PHP form here that sends an email when submitted:

<div id="contact">
<form id="contact_form" action="<?=base_url()?>contact/email_form" method="post" name="contact">
    <h4>Questions? Comments?</h4>
    <p>
        <label>Name</label>
        <input name="name" id="name" type="text" class="text" />
    </p>
    <p>
        <label>Email</label>
        <input name="email" id="email" type="text" class="text" />
    </p>
    <p class="message">
        <label>Question</label>
        <textarea name="message" id="message" rows="5" cols="5"></textarea>
    </p>
    <p class="alt">

        <input value="Send Info" id="submitbutton" type="submit">
    &l开发者_C百科t;/p>
</form>

This form works well but I currently have no validation so if the form is submitted even when the fields are blank. Isn't it possible to do validation with jquery?

Once the form is submitted it POSTS to a controller file in codeigniter which does the emailing logic using an email helper in codeigniter. See here:

if($this->email->send())
    {
        echo 'Message has been sent';
    }
    else
    {
        show_error($this->email->print_debugger());
    }

As you can see this redirects to the email_form view and echos the results. Is it possible to just stay on the same contact page that has the form and have the results of the post show there instead of redirecting to the <?=base_url()?>contact/email_form view? I was thinking of having the Text of the SUBMIT button change to "Message Sent" or something like that and then clearing the form fields. This way they stay on the contact page.

Is all of this possible with jquery? Thanks!

Yes, it is all possible.

Specifically, you would do something like this:

$( '#submitbutton' ).click(function(){
    $.ajax(); //do ajax

    return false; //should override default form submission
});

You would be looking for the $.post() function. However, I like to keep as much control as possible, so I use the $.ajax() function.

They both take URLs and data to process, so this would be very useful for you.

You would handle a successful return (presumably, with a particular success code to process on) in the "success:" parameter of $.ajax() or the success callback of $.post().
From inside that function, you can change the content of DOM elements (like the button in your example) using CSS selectors and jQuery functions like .html().

Here are some tutorials to get started using jQuery!

Remember, just validating the email isn't enough. You need to check other possibilities too!
In addition, make sure you are doing your validation on the server after the POST. Javascript can be turned off, and then (if you do validation on the browser) all your validation will do nothing to protect your server, or the public in general.

In summary, you can use $.post() or $.ajax() in jQuery to pass the data to your server for processing.

You should always do server validation because the user could have javascript disabled. I would validate each input for allowed values so that your application is secure and you do not turn into a spam email cannon. I would do this by adding a token to the form that ensures your application is the one that created the form and therefore it is ok to continue to the part of sending the email. See the following related post:

PHP Authenticity Tokens

I did basically this exact same thing this morning:

$('#contact_form').submit(function() {
    // this is the client side check, it just checks if they are not empty
    if( $(this).find('#name').val() == '' ||  $(this).find('#email').val() == '' || $(this).find('#message').val() == '') {
        return false;
    }
    // post to the server
    $.post('<?=base_url()?>contact/email_form'), 
      {name:$(this).find('#name').val(),email:$(this).find('#email').val(),message:$(this).find('#message').val()},
      function(data) {
          // this checks the return value from the submit
          if (data == 'Message has been sent') {
               // do something
               $('#contact p.alt').html('Message Sent');
          } else {
               // the send email function returned something other than success
               alert('failed');
          }
      }
    return false;
}