Input Validation using Vue.js with PHP

Submitted by nurhodelta_17 on Thursday, December 14, 2017 - 18:33.

Getting Started

I've used CDN for bootstrap, vue.js, and axios.js in this tutorial so, you need internet connection for them to work.

index.php

First, we're gonna create our index which contains our Form that we are going to validate.
  1. <!DOCTYPE html>
  4.         <title>Input Validation using Vue.js with PHP</title>
  5.         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  6.         <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>
  7.         <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
  8.         <style type="text/css">
  9.                 .div-space{
  10.                         height:20px;
  11.                 }
  12.                 .demo-label{
  13.                         margin-top:7px;
  14.                 }
  15.                 .top-margin{
  16.                         margin-top:10px;
  17.                 }
  18.                 .error{
  19.                         font-size:13px;
  20.                 }
  21.         </style>
  22. </head>
  24.         <div class="container">
  25.                 <h1 class="page-header text-center">Input Validation using Vue.js with PHP</h1>
  26.                 <div id="validate">
  27.                         <div class="row">
  28.                                 <div class="col-md-10 col-md-offset-1">
  29.                                         <div class="alert alert-success text-center" v-if="successMessage">
  30.                                                 <button type="button" class="close" @click="clearMessage();"><span aria-hidden="true">&times;</span></button>
  31.                                                 <span class="glyphicon glyphicon-check"></span> {{ successMessage }}
  32.                                         </div>
  33.                                         <div class="panel panel-primary">
  34.                                                 <div class="panel-heading">
  35.                                                         Input Form
  36.                                                 </div>
  37.                                                 <div class="panel-body">
  38.                                                         <div class="top-margin"></div>
  39.                                                         <div class="row">
  40.                                                                 <div class="col-md-6">
  41.                                                                         <div class="form-group">
  42.                                                                                 <div class="col-md-3">
  43.                                                                                         <label class="demo-label">Username:</label>
  44.                                                                                 </div>
  45.                                                                                 <div class="col-md-9">
  46.                                                                                         <input type="text" ref="username" class="form-control" v-model="forValidation.username">
  47.                                                                                         <div v-if="errorUsername" class="error">{{ errorUsername }}</div>
  48.                                                                                 </div>
  49.                                                                         </div>
  50.                                                                 </div>
  51.                                                                 <div class="col-md-6">
  52.                                                                         <div class="form-group">
  53.                                                                                 <div class="col-md-3">
  54.                                                                                         <label class="demo-label">Password:</label>
  55.                                                                                 </div>
  56.                                                                                 <div class="col-md-9">
  57.                                                                                         <input type="password" ref="password" class="form-control" v-model="forValidation.password">
  58.                                                                                         <div v-if="errorPassword" class="error">{{ errorPassword }}</div>
  59.                                                                                 </div>
  60.                                                                         </div>
  61.                                                                 </div>
  62.                                                         </div>
  63.                                                         <div class="div-space"></div>
  64.                                                         <div class="row">
  65.                                                                 <div class="col-md-6">
  66.                                                                         <div class="form-group">
  67.                                                                                 <div class="col-md-3">
  68.                                                                                         <label class="demo-label">Firstname:</label>
  69.                                                                                 </div>
  70.                                                                                 <div class="col-md-9">
  71.                                                                                         <input type="text" ref="firstname" class="form-control" v-model="forValidation.firstname">
  72.                                                                                         <div v-if="errorFirstname" class="error">{{ errorFirstname }}</div>
  73.                                                                                 </div>
  74.                                                                         </div>
  75.                                                                 </div>
  76.                                                                 <div class="col-md-6">
  77.                                                                         <div class="form-group">
  78.                                                                                 <div class="col-md-3">
  79.                                                                                         <label class="demo-label">Lastname:</label>
  80.                                                                                 </div>
  81.                                                                                 <div class="col-md-9">
  82.                                                                                         <input type="text" ref="lastname" class="form-control" v-model="forValidation.lastname">
  83.                                                                                         <div v-if="errorLastname" class="error">{{ errorLastname }}</div>
  84.                                                                                 </div>
  85.                                                                         </div>
  86.                                                                 </div>
  87.                                                         </div>
  88.                                                         <div class="div-space"></div>
  89.                                                         <div class="row">
  90.                                                                 <div class="col-md-6">
  91.                                                                         <div class="form-group">
  92.                                                                                 <div class="col-md-3">
  93.                                                                                         <label class="demo-label">Email:</label>
  94.                                                                                 </div>
  95.                                                                                 <div class="col-md-9">
  96.                                                                                         <input type="text" ref="email" class="form-control" v-model="forValidation.email">
  97.                                                                                         <div v-if="errorEmail" class="error">{{ errorEmail }}</div>
  98.                                                                                 </div>
  99.                                                                         </div>
  100.                                                                 </div>
  101.                                                                 <div class="col-md-6">
  102.                                                                         <div class="form-group">
  103.                                                                                 <div class="col-md-3">
  104.                                                                                         <label class="demo-label">Website:</label>
  105.                                                                                 </div>
  106.                                                                                 <div class="col-md-9">
  107.                                                                                         <input type="text" ref="website" class="form-control" v-model="forValidation.website">
  108.                                                                                         <div v-if="errorWebsite" class="error">{{ errorWebsite }}</div>
  109.                                                                                 </div>
  110.                                                                         </div>
  111.                                                                 </div>
  112.                                                         </div>
  113.                                                         <div class="div-space"></div>
  114.                                                 </div>
  115.                                                 <div class="panel-footer">
  116.                                                         <button class="btn btn-primary" @click="validateInput();"><span class="glyphicon glyphicon-check"></span> Validate</button>
  117.                                                 </div>
  118.                                         </div>
  119.                                 </div>
  120.                         </div>
  121.                 </div>
  122.         </div>
  123. <script src="app.js"></script>
  124. </body>
  125. </html>

app.js

This contains our Vue.js code.
  1. var app = new Vue({
  2.         el: '#validate',
  3.         data:{
  4.                 forValidation: {username: '', password: '', firstname:'', lastname:'', email:'', website:''},
  5.                 errorUsername: "",
  6.                 errorPassword: "",
  7.                 errorFirstname: "",
  8.                 errorLastname: "",
  9.                 errorEmail: "",
  10.                 errorWebsite: "",
  11.                 successMessage: ""
  12.         },
  13.  
  14.         methods:{
  15.                 validateInput: function(){
  16.                         var valForm = app.toFormData(app.forValidation);
  17.                         axios.post('validate.php', valForm)
  18.                                 .then(function(response){
  19.                                         //console.log(response);
  20.                                         if(response.data.username){
  21.                                                 app.errorUsername = response.data.message;
  22.                                                 app.focusUsername();
  23.                                         }
  24.                                         else if(response.data.password){
  25.                                                 app.errorPassword = response.data.message;
  26.                                                 app.errorUsername = '';
  27.                                                 app.focusPassword();
  28.                                         }
  29.                                         else if(response.data.firstname){
  30.                                                 app.errorFirstname = response.data.message;
  31.                                                 app.errorUsername = '';
  32.                                                 app.errorPassword = '';
  33.                                                 app.focuFirstname();
  34.                                         }
  35.                                         else if(response.data.lastname){
  36.                                                 app.errorLastname = response.data.message;
  37.                                                 app.errorUsername = '';
  38.                                                 app.errorPassword = '';
  39.                                                 app.errorFirstname = '';
  40.                                                 app.focusLastname();
  41.                                         }
  42.                                         else if(response.data.email){
  43.                                                 app.errorEmail = response.data.message;
  44.                                                 app.errorUsername = '';
  45.                                                 app.errorPassword = '';
  46.                                                 app.errorFirstname = '';
  47.                                                 app.errorLastname = '';
  48.                                                 app.focusEmail();
  49.                                         }
  50.                                         else if(response.data.website){
  51.                                                 app.errorWebsite = response.data.message;
  52.                                                 app.errorEmail = response.data.message;
  53.                                                 app.errorUsername = '';
  54.                                                 app.errorPassword = '';
  55.                                                 app.errorFirstname = '';
  56.                                                 app.errorLastname = '';
  57.                                                 app.errorEmail = '';
  58.                                                 app.focusWebsite();
  59.                                         }
  60.                                         else{
  61.                                                 app.successMessage = response.data.message;
  62.                                                 app.errorUsername = '';
  63.                                                 app.errorPassword = '';
  64.                                                 app.errorFirstname = '';
  65.                                                 app.errorLastname = '';
  66.                                                 app.errorEmail = '';
  67.                                                 app.errorWebsite = '';
  68.                                         }
  69.                                 });
  70.                 },
  71.  
  72.                 focusUsername: function(){
  73.                         this.$refs.username.focus();
  74.                 },
  75.  
  76.                 focusPassword: function(){
  77.                         this.$refs.password.focus();
  78.                 },
  79.  
  80.                 focusFirstname: function(){
  81.                         this.$refs.firstname.focus();
  82.                 },
  83.  
  84.                 focusLastname: function(){
  85.                         this.$refs.lastname.focus();
  86.                 },
  87.  
  88.                 focusEmail: function(){
  89.                         this.$refs.email.focus();
  90.                 },
  91.  
  92.                 focusWebsite: function(){
  93.                         this.$refs.website.focus();
  94.                 },
  95.  
  96.                 toFormData: function(obj){
  97.                         var form_data = new FormData();
  98.                         for(var key in obj){
  99.                                 form_data.append(key, obj[key]);
  100.                         }
  101.                         return form_data;
  102.                 },
  103.  
  104.                 clearMessage: function(){
  105.                         app.successMessage = '';
  106.                 }
  107.  
  108.         }
  109. });

validate.php

Lastly, this is our PHP code that will validate our input.
  1. <?php
  2.  
  3. $out = array('username' => false, 'password' => false, 'firstname' => false, 'lastname' => false, 'email' => false, 'website' => false);
  4.  
  5. function check_input($data) {
  6.   $data = trim($data);
  7.   $data = stripslashes($data);
  8.   $data = htmlspecialchars($data);
  9.   return $data;
  10. }
  11.  
  12. $username=check_input($_POST['username']);
  13. $password=check_input($_POST['password']);
  14. $firstname=check_input($_POST['firstname']);
  15. $lastname=check_input($_POST['lastname']);
  16. $email=check_input($_POST['email']);
  17. $website=check_input($_POST['website']);
  18.  
  19. if($username==''){
  20.         $out['username']=true;
  21.         $out['message']='Username is required';
  22. }
  23.  
  24. elseif (!preg_match("/^[a-zA-Z_1-9]*$/",$username)) {
  25.         $out['username']=true;
  26.         $out['message'] = "Only letters, numbers and underscore allowed";
  27. }
  28.  
  29. elseif($password==''){
  30.         $out['password']=true;
  31.         $out['message']='Password is required';
  32. }
  33.  
  34. elseif($firstname==''){
  35.         $out['firstname']=true;
  36.         $out['message']='Firstname is required';
  37. }
  38.  
  39. elseif (!preg_match("/^[a-zA-Z ]*$/",$firstname)) {
  40.         $out['firstname']=true;
  41.         $out['message'] = "Only letters and white space allowed";
  42. }
  43.  
  44. elseif($lastname==''){
  45.         $out['lastname']=true;
  46.         $out['message']='Lastname is required';
  47. }
  48.  
  49. elseif (!preg_match("/^[a-zA-Z ]*$/",$lastname)) {
  50.         $out['lastname']=true;
  51.         $out['message'] = "Only letters and white space allowed";
  52. }
  53.  
  54. elseif($email==''){
  55.         $out['email']=true;
  56.         $out['message']='Email is required';
  57. }
  58.  
  59. elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  60.         $out['email']=true;
  61.         $out['message']='Invalid Email Format';
  62. }
  63.  
  64. elseif($website==''){
  65.         $out['website']=true;
  66.         $out['message']='Website is required';
  67. }
  68.  
  69. elseif (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  70.         $out['website']=true;
  71.         $out['message']='Invalid URL';
  72. }
  73.  
  74. else{
  75.         $out['message']='Form Validated';
  76. }
  77.  
  78. header("Content-type: application/json");
  79. echo json_encode($out);
  80. die();
  81.  
  82.  
  83. ?>
That ends this tutorial. Happy Coding :)
Tags
php
vue.js
axios.js
validate
validation
Form Validation
input validation using php and javascript

Comments

Submitted by oleteacher on Fri, 12/15/2017 - 05:12

Thank you for sharing this series on Vue. Have been wanting to learn more about the power of Vue and you have made it simpler. Cheers!

Add new comment

About text formats