title: Validate form fields using ajax
body: <p>I do have a jquery code to validate my form but unfornutately it is not that accurate. I would like to validate the fields thoroughly like only to accept numbers on phone field and only a valid email address on email field. </p>
  
  <p>Also I would like to show the error ( or just add a red border one field ) as soon as the user types/inputs a value without clicking submit button, so it looks like a real time checker.</p>
  
  <p>Can anyone derive my script, I am really not confident about this. Also derive my php code if u think it is wrong. Would love to learn how to use session also so user can only submit once every session. </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;head&gt;
  
      &lt;script&gt;
        $(function () {
  
          $('.cbf').on('submit', function (e) {
  
            e.preventDefault();
  
            var name = $('#name').val();
            var phone = $('#phone').val();
            var email = $('#email').val();
  
            if ( name == "" ) {
               alert('Please provide valid name');
               $('#name').addClass('error');
            }
  
            else if ( phone == "" ) {
               alert('Please provide a valid phone number');
               $('#phone').addClass('error');
               $('#name').removeClass('error');
            }
  
            else if ( email == "" ) {
               alert('Please provide a valid email');
               $('#email').addClass('error');
               $('#phone').removeClass('error');
            }
  
            else {
                $.ajax({
                  type: 'post',
                  url: 'index.php',
                  data: $('.cbf').serialize(),
                  data: "name="+ name +"&amp; phone="+ phone +"&amp; email="+ email,
                  success: function () {
                    alert('We will contact you shortly! Thanks!');
                  },
                  complete:function(){
                          $('.cbf').each(function(){
                              this.reset();   //Here form fields will be cleared.
                          });
                     }
                });
  
                $('#email').removeClass('error');
  
            }
  
          });
  
        });
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;form method="post" action="&lt;?php echo $_SERVER["PHP_SELF"];?&gt;" class="cbf"&gt;
  
  &lt;fieldset&gt;
  
      &lt;input type="text" id="name" name="name" value="" placeholder="Name"&gt;
      &lt;input type="text" id="phone" name="phone" value="" placeholder="Phone"&gt;
      &lt;input type="email" id="email" name="email" value="" placeholder="Email Address"&gt;
      &lt;input type="submit" id="submit" name="submit" value="Get Call Back"&gt;
  
  &lt;/fieldset&gt;
  
  &lt;/form&gt;
  
      &lt;?php
  
      session_start();
  
  if ('POST' === $_SERVER['REQUEST_METHOD']) {
  
  $_SESSION['posted'] = true;
  
  $to = "myemail@gmail.com";
  $subject = "Someone wants a Call Back!";
  
  // data the visitor provided
  
  //$name_field = $_POST['name'];
  //$phone_field = $_POST['phone'];
  //$email_field = $_POST['email'];
  
  $name_field = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
  $email_field = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);
  $phone = filter_var($_POST['phone'], FILTER_SANITIZE_INT);
  
    //constructing the message
    $body = " From: $name_field\n\n Phone: $phone_field\n\n E-mail: $email_field\n\n";
  
    // ...and away we go!
    mail($to, $subject, $body);
  
  } else {
  // handle the error somehow
  }
  ?&gt;
  </code></pre>