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>
  2. <html>
  3. <head>
  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>
  23. <body>
  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

Comments

Submitted byoleteacheron 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