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 “.
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;
}