Create Simple Registration Form Using jQuery Form Validation and PHP

jQuery Form Validation

We have created a simple HTML form with four fields- Email, Password., and SignUp with new password. There is a jQuery function for complete validation and user data get inserted through PHP script.Before inserting into database, sanitization and validation on email is done using PHP. Also, user input email get checked into database for itâ€™s existence, if it exist then, user must enter another email.

You can download our zip file or simply follow our code and edit it to use.

HTML File:

index.html

Given below our complete HTML code , copy to use it:

<form method="post" action="login-auth.php" id="form">
 <div style="margin-bottom:6px">
 <h2>Sign In and Sign Up Using PHP,JQuery</h2>
 <label>Email</label> <br/>
 <input type="text" name="email"  class="input" id="email"/><br />
 <input type="radio" name="choose" id="login" checked="checked" class="radio"/> I have an account <br />
 <input type="radio" name="choose" id="signup" class="radio"/> I am new!<br />
 </div>
 <div style="" id="login_block">
 <label>Password</label><br />
 <input type="password" name="password" class="input" id="password"/><br/>
 <input type="submit" value=" Sign In " id="pass" class="button"/>
 </div>
 <div id="signup_block">
 <label>Choose password</label><br/>
 <input type="password" name="newpassword" class="input" id="newpassword" /><br/>
 <input type="submit" value=" Sign Up " id="pass" class="button"/>
 </div>
 </form>

We use some scripts for validate form:

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="js/jquery.validate.min.js"></script>
 <script type="text/javascript" src="js/jquery.form.js"></script>

Given below our complete jQuery code:

<script type="text/javascript">
 $(document).ready(function()
 {
 $('#response').hide();
 $('#signup').click(function()
 {
 document.getElementById('password').value='';
 $('#login_block').hide();
 $('#signup_block').show();
 });
 $('#login').click(function()
 {
 document.getElementById('newpassword').value='';
 $('#signup_block').hide();
 $('#login_block').show();
 
 });
 
 
       if(jQuery("#form").length > 0){
       jQuery('#form').validate({
   
         // Add requirements to each of the fields
         rules: {
           
 
             email: {
                 required: true,
                 email: true
             },
             password: {
                 required: true,
                 minlength: 5
             }
         },
 
         // Specify what error messages to display
         // when the user does something horrid
         messages: {
 
             email: {
                 required: "Please enter a email.",
             },
             password: {
                 required: "Please enter a feedback.",
                 minlength: jQuery.format("At least {0} characters required.")
             }
         },
         // Use Ajax to send everything to processForm.php
         submitHandler: function(form) {
             jQuery("#pass").attr("value", "Submitting...");
             jQuery(form).ajaxSubmit({
                 success: function(responseText, statusText, xhr, $form) {
                     jQuery('#response').show();
                     jQuery("#response").prepend(responseText);
                     jQuery("#form").button('reset');
                     jQuery("#pass").attr("value", "Submit");
                 }
             });
             return false;
         }
      });
     }
 });
 </script>

This was all about to create simple registration form with validation and mysql database connectitvity. I hope you like it, Keep reading our other programming blogs.