Jquery animate php echo error in html

Question

I'm trying to animate a certain given error from the php form validation in the main html page. My problem is that I don't know how to pass the error to trigger the jquery script to slide a message on top the form in the browser page.

html - contact.php

<form method="post" name="contact_form" action="message_handler.php">
<input type="text" class="textbox" name="name" maxlength="12" />
<input type="text" class="textbox" name="last_name" maxlength="12" />
<input type="text" class="textbox" name="email" maxlength="40" />
<input type="text" class="textbox_2" name="title" maxlength="40" />
<textarea name="message" ></textarea>
<input type="submit" value="Send Form">
</form>

php - message_handler.php

  $name = $last_name = $visitor_email = $title = $message = $about = $validation = '';
  $name = $_POST['name'];
  $last_name = $_POST['last_name'];
  $visitor_email = $_POST['email'];
  $title = $_POST['title'];
  $message = $_POST['message'];
  $about = $_POST['about'];
  $validation = $_POST['validation'];
  $errors = array();

  if( empty($name) || empty($visitor_email) || empty($message) || empty($validation))
  { 
        echo 'Required fields.';
  }

jquery - general_script.js

$('.error_message').animate({'width':300}, {queue:false, duration:200});

Are you wanting the page not to reload when you submit the form? if so you will need to look into using $.ajax to post the form and get the required result, otherwise you have to validate the form using jquery (but then this isn't very good practice unless you leave in the server side validation too — Pete, Jan 30 '13 at 15:07
Is it possible to validate the form using ajax then if the form is correct, make ajax call the php file to send the email or if it is incorrect make ana animation like a sliding message smoothly like jquery does? — CIRCLE, Jan 30 '13 at 15:28

score 0 · Answer 1 · answered Jan 30 '13 at 15:03

First of all, it's not necessary to validate form using php. You can do it via jquery also. Use jquery on form submit, and make all validation there.

(Give submit button class .submit. Also position .error_message div to the place where you want error to be display using css, and hide it.)

HTML

<div class='error_message' style='display:none'></div>

jQuery

$(document).ready(function() {
     $('form').on('click', '.submit', function() {
          var name = $("input[name='name']").val();
          var lname = $("input[name='lastname']").val();
          var email = $("input[name='email']").val();
          var title = $("input[name='title']").val();

          if(name.length == 0 || lname.length == 0 || email.length == 0 || title.length == 0) {
               $('.error_message').html("All fields required.");
               $('.error_message').fadeIn();
          }

          // .. more validation can be done here ..

          return false;
     });
})

if it returns false the form will be submited throw the php message_handler file? — CIRCLE, Jan 30 '13 at 15:30
@circle73, return false, means submit button will not submit form data. More can be found in this question [here](http://stackoverflow.com/questions/5927689/when-should-i-use-return-false-in-jquery-function) — user1995997, Jan 31 '13 at 04:06

Jquery animate php echo error in html

1 Answers1