Validating and Saving a New Member

Submitted by GeePee on Wednesday, April 15, 2015 - 22:57.
In this tutorial, I'm going to show how to validate the user inputs using Javascript and saving the data into MySQL Database using simple PHP. To start in tutorial, first open our last topic called Creating a Registration Page Part I and I made some changes and here’s the modified index file:
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8">
  6.   <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7.   <meta content="" name="description">
  8.   <meta content="" name="author">
  9.   <link href="#" rel="shortcut icon">
  10.  
  11.   <title>Philsocial</title><!-- Bootstrap core CSS -->
  12.   <link href="css/bootstrap.css" rel="stylesheet"><!-- Custom styles for this template -->
  13.   <link href="jumbotron.css" rel="stylesheet">
  14.   <script type="text/javascript" src="js/registrationformValidation.js"> </script>
  15.  
  16. </head>
  17.  
  18. <body>
  19.   <div class="navbar navbar-inverse navbar-fixed-top">
  20.     <div class="container">
  21.       <div class="navbar-header">
  22.         <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type=
  23.         "button"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class=
  24.         "icon-bar"></span></button> <a class="navbar-brand" href="#" style=
  25.         "font-weight: bold">Philsocial</a>
  26.       </div>
  27.  
  28.       <div class="navbar-collapse collapse">
  29.         <form action="home.php" class="navbar-form navbar-right" method="post">
  30.           <div class="form-group">
  31.             <input class="form-control" placeholder="Email" type="text">
  32.           </div>
  33.  
  34.           <div class="form-group">
  35.             <input class="form-control" placeholder="Password" type="password">
  36.           </div>
  37.                    <div class="form-group">
  38.                   <button class="btn btn-success" name="login" type="submit">Sign in</button>
  39.                         </div>
  40.                 </form>
  41.       </div><!--/.navbar-collapse -->
  42.     </div>
  43.   </div><!-- Main jumbotron for a primary marketing message or call to action -->
  44.  
  45.  
  46.  <div class="container">
  47.       <div class="rows">
  48.         <div class="col-xs-6">
  49.         <h3>Philsocial helps you connected and share with the other people in your
  50.         life</h3><img src="img/background.png" width="500px"></div>
  51.  
  52.         <div class="col-xs-6">
  53.                 <!--action="register.php"  onsubmit="return checkRegistration();"-->
  54.           <form  action="register.php" class="form-horizontal" id="register" method="post" onSubmit="return checkRegistration();" >
  55.             <fieldset>
  56.               <legend>Sign Up</legend>
  57.  
  58.               <h4>It’s free and always will be.</h4>
  59.  
  60.               <div class="rows">
  61.                 <div class="col-xs-12">
  62.                   <div class="form-group">
  63.                     <div class="rows">
  64.                       <div class="col-md-12">
  65.                         <div class="col-lg-6" id="divfname">
  66.                           <input class="form-control input-lg" id="fName" name="fName" placeholder=
  67.                           "First Name" type="text" >
  68.                         </div>
  69.  
  70.                         <div class="col-lg-6">
  71.                           <input class="form-control input-lg" id="lName" name="lName" placeholder=
  72.                           "Last Name" type="text">
  73.                         </div>
  74.                       </div>
  75.                     </div>
  76.                   </div>
  77.  
  78.                   <div class="form-group" id="divemail">
  79.                         <div class="rows">
  80.                       <div class="col-md-12">
  81.                         <div class="col-lg-12">
  82.                           <input class="form-control input-lg" id="email" name="email"
  83.                                                     placeholder="Your Email" type="text" onblur="checkEmail();">
  84.                         </div>
  85.                       </div>
  86.                     </div>
  87.                   </div>
  88.  
  89.                   <div class="form-group" id="divremail">
  90.                     <div class="rows">
  91.                       <div class="col-md-12">
  92.                         <div class="col-lg-12">
  93.                           <input class="form-control input-lg" id="reemail" name="reemail"
  94.                                                   placeholder="Re-enter Email" type="text" onblur="checkEmail2();">
  95.                         </div>
  96.                       </div>
  97.                     </div>
  98.                   </div>
  99.  
  100.                   <div class="form-group" id="divpass">
  101.                     <div class="rows">
  102.                       <div class="col-md-12">
  103.                         <div class="col-lg-12">
  104.                           <input class="form-control input-lg" id="password" name="password"
  105.                           placeholder="New Password" type="password">
  106.                         </div>
  107.                       </div>
  108.                     </div>
  109.                   </div>
  110.  
  111.                   <div class="form-inline">
  112.                     <div class="rows">
  113.                       <div class="col-md-12">
  114.                         <div class="col-md-3">
  115.                           <label>Birthday</label>
  116.                         </div>
  117.  
  118.                         <div class="col-lg-3">
  119.                           <select class="form-control input-sm" name="month" id="month">
  120.                            
  121.                             <option value="">Month</option>
  122.                                                         <?php
  123.                                                           $m = array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
  124.                                                           foreach ($m as $month) {
  125.                                                                   echo '<option value='.$month.'>'.$month.'</option>';
  126.                                                           }
  127.                                                   ?>
  128.                           </select>
  129.                         </div>
  130.  
  131.                         <div class="col-lg-3">
  132.                           <select class="form-control input-sm" name="day" id="day">
  133.                            
  134.                          <option value="">Day</option>
  135.                                                         <?php
  136.                                                                 $d = range(31, 1);
  137.                                                                 foreach ($d as $day) {
  138.                                                                         echo '<option value='.$day.'>'.$day.'</option>';
  139.                                                                 }
  140.                                                        
  141.                                                         ?>
  142.                           </select>
  143.                         </div>
  144.  
  145.                         <div class="col-lg-3">
  146.                                                         <select class="form-control input-sm" name="yr" id="yr">
  147.                            <option value="">Year</option>
  148.                                                         <?php
  149.                                                                   $years = range(2010, 1900);
  150.                                                                   foreach ($years as $yr) {
  151.                                                                           echo '<option value='.$yr.'>'.$yr.'</option>';
  152.                                                                   }
  153.                                                          
  154.                                                   ?>
  155.                           </select>
  156.                         </div>
  157.                       </div>
  158.                     </div>
  159.                   </div>
  160.  
  161.                   <div class="form-group">
  162.                     <div class="rows">
  163.                       <div class="col-md-12" style="text-align: left">
  164.                                          
  165.                                           <div class="col-lg-3">
  166.                         <div class="radio">
  167.                           <label><input checked id="optionsRadios1" name="gender" type=
  168.                           "radio" value="Female">Female</label>
  169.                         </div>
  170.                                          </div>
  171.                                           <div class="col-lg-3">
  172.                                          
  173.                         <div class="radio">
  174.                           <label><input id="optionsRadios2" name="gender" type="radio"
  175.                           value="Male"> Male</label>
  176.                         </div>
  177.                                         </div> 
  178.                                                 </div>
  179.                     </div>
  180.                   </div>
  181.                                    <div class="form-inline">
  182.                     <div class="rows">
  183.                       <div class="col-md-12">
  184.                                                 <p>  By clicking Sign Up, you agree to our Terms and that you have
  185.                                                  read our Data Use Policy, including our Cookie Use.</p>
  186.                                                 </div>
  187.                                          </div>
  188.                                         </div>                                   
  189.                   <div class="form-group">
  190.                     <div class="rows">
  191.                       <div class="col-md-8">
  192.                         <div class="col-lg-12">
  193.                           <button class="btn btn-success btn-lg" type="submit" name="Submit">Sign Up</button>
  194.                         </div>
  195.                       </div>
  196.                     </div>
  197.                   </div>
  198.                                                                        
  199.                                  
  200.                                 </div>
  201.               </div>
  202.             </fieldset>
  203.           </form>
  204.         </div>
  205.       </div><!--rows-->
  206.     </div><!--container-->
  207.  
  208.   <hr>
  209.  
  210.   <footer>
  211.     <p style="text-align: center">© Philsocial 2013</p>
  212.   </footer><!-- /container -->
  213.   <!-- Bootstrap core JavaScript
  214.     ================================================== -->
  215.   <!-- Placed at the end of the document so the pages load faster -->
  216.   <script src="assets/js/jquery.js"></script>
  217.   <script src="js/bootstrap.min.js"></script>
  218.  
  219. </body>
  220. </html>
And as you can observe, we have added new line of code at the head section. And this is the code:
  1.   <script type="text/javascript" src="js/registrationformValidation.js"> </script>
This code is a link to our javascript file that will be used to validate the user inputs upon submission the registration form. Then let’s create this javascript file named “registrationformValidation.js” and will save it inside js folder. And add the following code:
  1. function checkRegistration(){
  2.        
  3.         //this line gets the specific value from every fields
  4.         var f_name = document.forms["register"]["fName"].value;
  5.         var l_name = document.forms["register"]["lName"].value;
  6.         var email  = document.forms["register"]["email"].value;
  7.         var reemail = document.forms["register"]["reemail"].value;
  8.         var password = document.forms["register"]["password"].value;
  9.            //check if every fields is equal to null or empty it will return this function to false
  10.            if (f_name == '' || l_name == '' || email == '' || reemail == '' || password == ''){
  11.                        
  12.                         alert("You must fill in all of the fields.");
  13.                         window.location = "index.php";
  14.                         return false;
  15.                 }
  16.                 //get the selected value for month
  17.                 //get the index based on the selected item
  18.                 var x = document.getElementById("month").selectedIndex;
  19.                 //get the specific value based on the selectedIndex
  20.                 var choice = document.getElementsByTagName("option")[x].value;
  21.  
  22.                 //get the selected value for Day
  23.                 var y = document.getElementById("day").selectedIndex;
  24.                 var choice1 = document.getElementsByTagName("option")[y].value;
  25.  
  26.                 //get the selected value for Year
  27.                 var z = document.getElementById("yr").selectedIndex;
  28.                 var choice2 = document.getElementsByTagName("option")[z].value;
  29.  
  30.                 //check if the selected value is empty then it will return the function to false       
  31.                 if (choice == "" || choice1 == "" || choice2 == ""){
  32.                  alert("You must indicate your full birthday to register.");
  33.                  return false;
  34.                 }
  35.        
  36.         }
  37.  
  38.  
  39. function checkEmail(){
  40.         //get value of email address inputted by the user
  41.         var e_mail =  document.getElementById("email").value;
  42.         //get the position of at symbol
  43.         var atpos = e_mail.indexOf("@");
  44.         //get the position of dot
  45.         var dotpos = e_mail.lastIndexOf(".");
  46.         //get the class name of div of email
  47.         var divemail = document.getElementById('divemail');
  48.  
  49.         if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){        
  50.         // if the javascript detect the bad inputs from user
  51.         //will set the class Name of error
  52.         //then you can notice that the color of email textbox will turn to red
  53.            divemail.className = "form-group has-error";
  54.            //and set the focus to the email
  55.            document.getElementById('email').focus();
  56.        
  57.         }else{
  58.         //set the class name to success
  59.         //the color will turn to green
  60.             divemail.className = "form-group has-success";
  61.                
  62.         }
  63. }      
  64. function checkEmail2(){
  65.         var email =  document.forms["register"]["email"].value;
  66.         var divreemail = document.getElementById('divremail');
  67.                 var divemail = document.getElementById('divemail');
  68.                 var reemail = document.getElementById("reemail").value;
  69.                 //check if the re enter the email address is equal to the inputted email
  70.                 if(email != reemail){
  71.                         divreemail.className = "form-group has-error";
  72.                         document.getElementById("reemail").focus();
  73.                 }else{
  74.                         divreemail.className = "form-group has-success";
  75.                         divemail.className = "form-group has-success";
  76.                 }
  77. }
Then well create a new PHP file name “register.php” and add the following code: This code will do the saving data to the MySQL Database tables.
  1. <?php
  2. //set up mysql connection
  3. mysql_connect("localhost", "root", "") or die(mysql_error());
  4. //select database
  5. mysql_select_db("philsocialdb") or die(mysql_error());
  6.  
  7. $f_name = $_POST['fName'];
  8. $l_name = $_POST['lName'];
  9. $email = $_POST['email'];
  10. $password = sha1($_POST['password']);
  11. $month  = $_POST['month'];
  12. $day    = $_POST['day'];
  13. $yr     = $_POST['yr'];
  14. $gender = $_POST['gender'];
  15.  
  16. $query = "INSERT INTO `user_info` (`fName`, `lName`, `email`, `pword`, `mm`, `dd`, `yy`, `gender`)
  17. VALUES ('{$f_name}', '{$l_name}', '{$email}', '{$password}', '{$month}', '{$day}', '{$yr}', '{$gender}')";
  18.                                        
  19. if (mysql_query($query)) {
  20.    
  21.     echo "<script type=\"text/javascript\">
  22.                alert(\"New member added successfully.\");
  23.                window.location = \"index.php\"
  24.            </script>";
  25.    
  26. } else{
  27.     die("Failed: " . mysql_error());
  28. }
  29. ?>
Heres’ the MySQL table structure:
  1. CREATE TABLE IF NOT EXISTS `user_info` (
  2.   `user_id` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `fName` VARCHAR(30) NOT NULL,
  4.   `lName` VARCHAR(30) NOT NULL,
  5.   `email` VARCHAR(40) NOT NULL,
  6.   `pword` VARCHAR(60) NOT NULL,
  7.   `mm` VARCHAR(10) NOT NULL,
  8.   `dd` INT(11) NOT NULL,
  9.   `yy` INT(11) NOT NULL,
  10.   `gender` VARCHAR(10) NOT NULL,
  11.   PRIMARY KEY (`user_id`)
  12. ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
Tags
Form Validation
Saving data
Twitter Bootstrap
php
MySQL Database

Add new comment

About text formats
  • 112 views