JQuery Simple From Validation | Lessoncup Programming Blog

Sunday, 6 October 2013

JQuery Simple From Validation

In JQuery we have validation plugin with that i developed a simple form validation may it will use for you.



Step 1

Add the bellow code in index.php bottom of the <BODY> tag.
<script src="jquery-1.10.2.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>

<script>

$( "#reg" ).validate({
  rules: {
    uname: {
      required: true
    },
 password: {
      required: true,
   minlength:3
    },
 email: {
      required: true,
   email:true
    },
 mobile: {
      required: true,
   number:true,
   maxlength:10
    }
  }
});
</script>

Step 2

Add the CSS code in index.php inside the <HEAD> tag.
<style>

body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; color:#000;}

#register{background-color:#09C; border:solid #666 1px; width:500px; height:auto; margin:0 auto; color:#fff;}

.submit{ background-color:#000; color:#FFF; padding:10px; cursor:pointer;}

input,select{ border-radius:5px; background-color:#F3F3F3; -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px; border:0; padding:5px;}


</style>

Step 3

Add the bellow code in index.php bottom of the <BODY> tag.
<div id="register">
  <form name="form1" id="reg" method="post" action="">
    <table width="400" border="0" align="center" cellpadding="5" cellspacing="5">
      <tr>
        <td width="162">&nbsp;</td>
        <td width="203">&nbsp;</td>
      </tr>
      <tr>
        <td align="right" valign="top">User Name</td>
        <td valign="top">
        <input type="text" name="uname" id="uname" placeholder="Username"></td>
      </tr>
      <tr>
        <td align="right" valign="top">Password</td>
        <td valign="top"><input type="text" name="password" id="password" placeholder="Password"></td>
      </tr>
      <tr>
        <td align="right" valign="top">Email</td>
        <td valign="top"><input type="text" name="email" id="email" placeholder="Email"></td>
      </tr>
      <tr>
        <td align="right" valign="top">Mobile</td>
        <td valign="top"><input type="text" name="mobile" id="mobile" placeholder="Mobile"></td>
      </tr>
      <tr>
        <td align="right">&nbsp;</td>
        <td><input name="button" type="submit" class="submit" id="submit" value="Submit"></td>
      </tr>
    </table>
  </form>
</div>



Live Demo   Download Script

2 comments :

  1. What you have done in this???
    I mean this well documented on the plugin website. Even in better way that you have explained here...

    ReplyDelete
    Replies
    1. well .. i just given a sample intro about small intro and how to use the plugin validation .. thank you

      Delete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons