Validate Form Document using jQuery Validate

There are usefull plugin for validate form submit. I used jQuery Validate to validate input my form document. Find this plug in http://docs.jquery.com/Plugins/Validation.

The jQuery Validate also have a built in method to validate:
1. email
2. creditcard
3. number only
4. charater only

You can add the method from the additional-methods.js. In that file you can find some example about US phone number, VIN, zip code etc.

For example you can try my coding:

<>
<>
< type="text/javascript" src="../../jquery-1.2.6.js">
< src="jquery.validate.js" type="text/javascript">
< src="additional-methods.js" type="text/javascript">

< type="text/javascript">
/*
$.validator.setDefaults({

  submitHandler: function() {
      //alert("submitted!");
      //$('#submit').remove();
      $(':input.required').trigger('blur');
  }

});
*/ 
//$.metadata.setType("attr", "validate");


$().ready(function() {

  $("#formx").validate({
      rules: {
          ship_name: "required",
          ship_email: {
              required: true,
              email: true
          },
          ship_address: {
              required: true,
              minlength: 20
          },
          ship_phone: {
              required: true,
              phoneID: true,
              number: true,
              rangelength:[10,15]
          }, 
          country: "required",
          agree: "required"
      },
      messages: {
          ship_name: "Please enter your firstname",
          ship_email: "Please enter your valid email",
          ship_address: "Please provide your address",
          ship_phone: "Please provide your phone number", 
          country: "Please select your country",
          agree: "Please accept our policy"
      }
  });

});


< type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
  margin-left: 10px;
  width: auto;
  display: inline;
}
#newsletter_topics label.error {
  display: none;
  margin-left: 103px;
}



<>


< id="formx" method="post" action="test.php">
Name < name="ship_name" id="ship_name" type="text" maxlength="100">

Email < name="ship_email" id="ship_email" type="text" maxlength="100">

Address < name="ship_address" type="text" maxlength="100">

Phone < name="ship_phone" type="text" maxlength="100">

Country < name="country" id="country">
      < value="">Select Country
      < value="3">India
      < value="5">Iran
      < value="5">Iraq 
      

   

Agree ? < type="checkbox" id="agree" name="agree">

< type="submit" value="submit" id="submit">

< /form>

< /body>
< /html>

In javascript for validate ship_phone I modified additional-methods.js and added some function phoneID. The phoneID function is a regex for mobile phone number in Indonesia.