Server Side Form Validation using Regular Expressions

Form Validation

Some days back I had posted ” Perfect Javascript Form Validation using Regular Expressions “, Now in this post I given a simple example about “Server Side Form Validation using Regular Expressions “.

Form Validation
Form Validation

Perfect Javascript Form Validation using Regular Expressions
Jquery Validation with Regular Expressions

index.php
Contains PHP code. preg_match — Case insensitive regular expression match.

<?php
// define variables and set to empty values
$nameErr = $emailErr = $phoneErr = $genderErr = "";
$name = $email = $phone = $gender = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") 
{
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  	} else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed";
    }
  }

  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  	} else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
    }
  }
  
  if (empty($_POST["phone"])) {
    $phoneErr = "Phone is required";
  	} else {
    	$phone = test_input($_POST["phone"]);
  		if(preg_match("/^\d+\.?\d*$/",$phone) && strlen($phone)==10){
    	}
    else
    {
     		$phoneErr =   'Invalid Phone Number';
      $phone='';
    }
  }	
 	if (empty($_POST["gender"])) {
     $genderErr = "Gender is required";
  	} else {
    $gender = test_input($_POST["gender"]);
  	} 
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
} 


if(!empty($name) & !empty($email) & !empty($phone) & !empty($tax_amount))
{
   header("location:thanks.html");
}
?> 

HTML code

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
      <div>
        <input type="text" name="name" class="form-control" placeholder="Full Name:" value="<?php echo $name;?>">
        <span class="error">* <?php echo $nameErr;?></span>
      </div>
    <?php /*?>  <div class="form-group">
        <input type="text" name="Name" class="form-control" placeholder="Last Name:" value="<?php echo $lname;?>">
      </div><?php */?>
      <div>
        <input type="text" name="email" class="form-control" placeholder="Email:" value="<?php echo $email;?>">
        <span class="error">* <?php echo $emailErr;?></span>
      </div>
      <div>
        <input type="text" name="phone" class="form-control" placeholder="Phone #:" value="<?php echo $phone;?>">
        <span class="error">* <?php echo $phoneErr;?></span>
      </div>
      <div>
        <select class="form-control" name="gender">
        	<?php if($gender == '') { ?> <option value="0" selected>Gender</option> <?php  } else { ?>
            <option value="<?php echo $gender;?>" selected><?php echo $gender;?></option>
            <?php } ?>
            <option value="1">Male</option>
            <option value="2">Female</option>
        </select>
        <span class="error">* <?php echo $genderErr;?></span>
      </div>
      <button type="submit" class="click-btn">Submit Form</button>
    </form>

CSS CODE

.banner-form{ width:400px; padding:0px 0px 40px 0px; background:rgba(255,255,255,0.9); top:0; height:440px; right:6%; -moz-box-shadow: 0 -8px 10px #888; -webkit-box-shadow: 0 -8px 10px#888; box-shadow: 0 -8px 10px #888;}
.banner-form h2{ font-size:25px; color:#fff; padding-bottom:10px; background-color:#333; padding:15px 20px; text-align:center; font-weight:500px;}
.banner-form .form-control{ border-radius:0; height:40px;}
.banner-form button{ width:100%; border-radius:0; margin-bottom:0; padding: 12px; margin-top:5px;}
.banner-form .consultation-form{ padding:30px 40px;}

.error {color: #FF0000;}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
a.click-btn:hover, .click-btn:hover {
    background-color: #000;
    color: #fff;
}
.banner-form button {
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding: 12px;
    margin-top: 5px;
}
a.click-btn, .click-btn {
    background-color: #089de3;
    border: 0;
    color: #fff;
    font-size: 14px;
    margin-bottom: 8px;
    padding: 8px 15px;
    border-radius: 2px;
    font-weight: 500;
    transition: all 0.3s ease 0s;
    text-transform: uppercase;
}
.click-btn {
    float: none;
    display: inline-block;
}

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch, I am available for freelance work. info@quickmysupport.com

Leave a Reply

Your email address will not be published. Required fields are marked *