Jquery Validation for Driver Registration HTML Form

Hi make one html from which submitting without refresh by jquery. Problem is that I am beginner and I dont know how to add validation for html form. I need changes in script so first form will validate by jquery or ajax then it will submit by jquery witout page refresh.. have look in my code. Please provide me working solution in that first form validate by ajax jquery then submit by jquery without refresh.. Thanks in advance

JQUERY:

<script type="text/javascript"> 
$(document).ready(function(){
    $("form#form").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var ph开发者_如何学运维one = $("#phone").val();
var dataString =  'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;


        $.ajax({
            type: "POST",
            url: "addd.php",
            data: dataString,
            success: function(){
                 $('form#form').hide(function(){$('div.success').fadeIn();});
            }
        });
    return false;
    });
});
</script>

HTML FORM:

<form id="form" method="post" name="form" action=""> 
              <fieldset id="opt">

                        <legend>Driver Information</legend>

                        <label for="choice">Name : </label>
                        <input type="text" id="name" name="name" value=""> <br />
                        <label for="choice">Licence No : </label>
                        <input type="text" id="licence" name="licence" value=""> <br />
                        <label for="choice">Email : </label>
                        <input type="text" id="email" name="email" value=""> <br />
                        <label for="choice">Phone : </label>
                        <input type="text" id="phone" name="phone" value=""> <br />


                       <input type="hidden" name="uno" id="uno" value="" /> 
                        <br />
                         </fieldset>
                      <div align="center">

                       <input id="button2" type="submit" value="Add Driver" />  
                      <input id="button2" type="reset" />
                      </div>
                    </form>

---

I found multiple errors/mistakes on your HTML form too. some of them I want to mention..

• for attribute of label have same value of the next input/select id, read:

  http://www.w3schools.com/tags/att_label_for.asp

• Dont assign name for name and id attribute, it's misleading.( good practice)

• Don't write value ="", if you there is no initial value of any input box.
• If u want to validate a hidden field then write some value for that on form intialization, otherwise it wud be always empty and your validation never works.

• If u want to validate all input field together for emptyness then use :input selector ,read :

  http://api.jquery.com/input-selector/

• Don't forget to validate email address

• If you want to post a form via ajax then there is no need to write method and action attribute in your form
• Your reset button shoud have some value, otherwise its takes default value.

---

A very useful and handy article for newbie for jquery ajax validation

http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition

OR you can use jquery validator plugin :

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

here is your neat and clean form

<form id="driverForm" name="driverForm"> 
    <fieldset id="opt">
        <legend>Driver Information</legend>
        <label for="lname">Name : </label>
        <input type="text" id="lname" name="lname" > <br />
        <label for="licence">Licence No : </label>
        <input type="text" id="licence" name="licence" ><br />
        <label for="email">Email : </label>
        <input type="text" id="email" name="email" ><br />
        <label for="phone">Phone : </label>
        <input type="text" id="phone" name="phone" > <br />
        <input type="hidden" name="uno" id="uno"  /><br />
    </fieldset>
    <div align="center">
        <input type="submit"  id="submitForm" name="submitForm" value="Add Driver" />  
        <input type="reset" value="clear" />
    </div>
</form>

Hope this will be useful for you.

UPDATE

put it insdie submit() and before ajax like this

$("form").submit(function() {
if($('#lname').val() == '')
            return false;
});

$.ajax({

NOTE: dont create dataString Manually there is inbuilt function in jQuery.

serialize

Please note that ,this is not matter that your form is submitting or not. most thing is it a valid form or not.

Happy to help :)