How would I check the value in form before sending it to server using ajax

I want to check the value enter in the form by user. i have applied validation and its working. The problem is that if user enter any form value incorrectly and then clicks submit, the whole page is refreshed and all input data is lost.

I want that validations is checked before passing it to ser开发者_StackOverflow社区ver. One of my friends told me its possible with AJAX. Can anyone guide a beginner on how to do this?

You can use javascript instead and save the server from transferring some extra KBs and calculations by using Ajax (which technically is javascript but you send the request back to the server)

Jquery has a plugin called validation that will make your life easier though:

http://docs.jquery.com/Plugins/validation

There is a live demo in the link above

For example if you wanted to validate the username you could do this

  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>

<form  id="commentForm">
<input id="uname" name="name" class="required"  />
</form>

yes you can use ajax or otherwise with your current approach you can use sessions to store user data and prevent it from being lost. with ajax you can show response from the server to show to the user.

    $.ajax({
         url: 'ajax_login.php',
         type:'post'.
         data:(/*data from form, like,*/ id: $('#username').val())
         success: function( data ) {
              if(data == 1) {
                   $('.feedback').html('data has been saved successfully');
                   //redirect to another page
              }
              else {
                    $('.feedback').html('data could not be saved');
                    $('.errors').html(data);
              }
         } 
    });


    ajax_login.php would be something like 
    <?php
            if(isset($_POST)) {
                 //do form validation if it is valid 
                 if(form is valid) {
                      saveData();
                      echo 1;
                 }
                 else {
                      echo $errors;
                 }
            } 
    ?>

Do not need ajax. Just set the onsubmit attribute of your form to "return checkfun();" and define checkfun some way like this:

function checkfun()
{
    if ( all things were checked and no problem to submit)
       return true;
    else
    {
       alert('ERROR!');
       return false;
    }
}