Thursday, December 20, 2012

Jquery Validation for registration page in php & mysql

<script type="text/javascript" src="assets/js/jquery.validate.js"></script>
<!-- Registration Validation -->
<script type="text/javascript">
      $(document).ready(function(){
            $('input').hover(function()
            {
            $(this).popover('show')
        });
            $("#register-form").validate({
                rules:{
                    user_name:{
                    required:true,
                    minlength: 5,
                    remote: {
                url: "getuser.php",
                type: "post",
            },
                    },
                    user_email:{
                            required:true,
                            email: true
                        },
                    pwd:{
                        required:true,
                        minlength: 6
                    },
                    location:{
                        required:true,
                        minlength: 5,
                        maxlength: 6
                    },
                    gender:"required"
                },
                    messages:{
                    user_name:{
                   
                    required:"Enter your username",
                    minlength:"Username must be minimum 5 characters",
                    remote: "Username already exists",
                    },
                    user_email:{
                        required:"Enter your email address",
                        email:"Enter valid email address",
                    },
                    pwd:{
                        required:"Enter your password",
                        minlength:"Password must be minimum 6 characters",
                    },
                    location:{
                        required:"Enter Location",
                        minlength:"Location must be minimum 5 digit",
                    },
                    gender:"Select Gender"
                },
                errorClass: "help-inline",
                errorElement: "span",
                highlight:function(element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                    $(element).parents('.control-group').addClass('success');
                }
            });
        });
      </script>
      <!-- End Registration Validation -->

      <form id="register-form" class="form" method='post' action=''>
          <legend>Register to <span class="blue"><img src="assets/img/logo.png"></span></legend>
          <div class="body">
          <!-- Username  -->
          <div class="control-group control-inline">
          <label  class="control-label" for="input01">Username</label>
            <input class="input-huge" type="text" id="user_name" name="user_name" rel="popover" data-content="Enter your username." data-original-title="Username" value="<?php echo $_POST['user_name']; ?>" >
            <div id="txtHint"></div>

            <!-- email -->
            <label class="control-label" for="input01">E-mail</label>
            <input class="input-huge" type="text" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email" value="<?php echo $_POST['user_email']; ?>">
            <!-- password -->
            <label class="control-label" for="input01">Password</label>
            <input class="input-huge" type="password" id="pwd" name="pwd" rel="popover" data-content="6 characters or more! Be tricky" data-original-title="Password" value="<?php echo $_POST['pwd']; ?>" >
            <!-- Location -->
            <label class="control-label" for="input01">Location</label>
            <input class="input-huge" type="text" id="location" name="location" rel="popover" data-content="Enter your location." data-original-title="Zip Code" value="<?php echo $_POST['location']; ?>"  >
          </div>
           <!-- Submit Button -->
          <div class="footer">
            <label class="checkbox inline" for="checkboxes">
            <input type="checkbox" id="check" name="check" value="1">
            I agree to something I will never read </label>
            <input type="submit" class="btn btn-success" name="register"  id="registerme" value="Register">
          </div>
        </form>


getuser.php

<?php
include_once("inc/config.php");
$q=$_REQUEST["user_name"];


$sql="SELECT * FROM users WHERE user_name = '".$q."'";

$result = mysql_query($sql);
$count=mysql_num_rows($result);
if($count==0)
{
 echo 'true';

}
else
{
echo  'false';
}


?>

1 comment:

  1. wow fantastic .. works well and is very helpful
    Thank you very much

    ReplyDelete

Thank you for your Comment....

Popular Posts