Php Form validation with Error messages with Checking fields.


Here i coded form validation using only php with display error messages and checking input fields correctly entered or not


Registration Form


Name is RequiredEmail RequiredPassword RequiredContact Details Required
    Male      Female

Gender is required

Address required



Please find the below code clearly with bootstrap and css also included. Add bootstrap folder into your project.



<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="\bootstrap\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="\bootstrap\css\bootstrap.min.css">
<script src ="..\bootstrap\js\bootstrap.js"></script>
<script src ="..\bootstrap\js\bootstrap.min.js"></script>
<title>Form Validation</title>
<style type="text/css">
body{
background-color: #ffb3b3;
}
.error {color: #FF0000;}
@import url(http://fonts.googleapis.com/css?family=Roboto);

/****** LOGIN MODAL ******/
.loginmodal-container {
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: roboto;
}

.loginmodal-container h1 {
  text-align: center;
  font-size: 1.8em;
  font-family: roboto;
}

.loginmodal-container input[type=submit] {
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.loginmodal-container input[type=text], input[type=password] ,input[type=email]{
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover {
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

.loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #4d90fe;
  padding: 17px 0px;
  font-family: roboto;
  font-size: 14px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a {
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
} 

.login-help{
  font-size: 12px;
}
h1
{
    color: #5599CC;
}
</style>
</head>

<body>
    <?php
$name =$email = $password =$contact = $gender = $address = $check= ""; 
$nameErr =$emailErr = $passwordErr =$contactErr = $genderErr = $addressErr = $checkErr= "";

if (isset($_POST["login"])) {

 //Name Validation
    
    if (empty($_POST["name"])) {
        $nameErr = "Name is Required";
    }
    else
    {
        $name = $_POST["name"];
         if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
       $nameErr = "Only letters and white space allowed"; 
             }
    }


// Email Validation

    if (empty($_POST['email'])) {
        $emailErr ="Email Required";
    }
    else
    {
        $email = $_POST["email"];
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       $emailErr = "Invalid email format"; 
     }
    }

//password validation

    if (empty($_POST["password"])) {
        $passwordErr ="Password Required";
    }
    else
    {
        $password = $_POST["password"];
        if (!preg_match_all('$\S*(?=\S{8,})(?=\S*[a-z])(?=\S*[A-Z])(?=\S*[\d])(?=\S*[\W])\S*$', $password))
        {
        $passwordErr = "Password Must be 1 Alphabet, Numerica and Special Char";
        }
    }
    if (empty($_POST["contact"])) {
        $contactErr = "Contact Details Required";
        }
        else
        {
            $contact = $_POST["contact"];
            if (!preg_match('/[\+]\d{2}[\-]\d{10}/', $contact)) {
                $contactErr = "Number Should be like +91-1234567890";
            }
        }



   if (empty($_POST["gender"])) {
     $genderErr = "Gender is required";
   } 
   else
    {
          $gender =$_POST["gender"];
   }
  

if (empty($_POST["address"])) {
    $addressErr = "Address required";
    
}
else
{
    $address = $_POST["address"];
}

}

?>


          <div class="modal-dialog">
                <div class="loginmodal-container">
                    <h1>Registration Form</h1><br>
                  <form method ="post" action = "">
                    <input type="text" name="name" placeholder="Username" value="<?php echo $name?>">
                    <span class="error"> <?php echo $nameErr;?></span>
                    <input type="email" name="email" placeholder="Email" value = "<?php echo $email;?>">
                    <span class="error"> <?php echo $emailErr;?></span>
                    <input type="password" name="password" placeholder="Password">
                    <span class="error"><?php echo $passwordErr;?></span>
                    <input type="text" name="contact" placeholder="Contact" value="<?php echo $contact;?>">
                    <span class="error"><?php echo $contactErr;?></span><br>
                    <label for="comment">Gender:</label>  &nbsp;&nbsp;             
                    <input type="radio" name="gender" >Male &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="gender" >Female<br><br>
                    <span class="error"><?php echo $genderErr;?></span><br>
                    <textarea class="form-control" name="address"></textarea><br>
                    <span class="error"><?php echo $addressErr;?></span>
                    <!-- <input type ="checkbox" name="check" >Accept it all<br><br> -->
                    <input type="submit" name="login" class="login loginmodal-submit" value="Login">
                  </form>
                    
                  <div class="login-help">
                    <a href="#">Register</a> - <a href="#">Forgot Password</a>
                  </div>
                </div>
            </div>
            
</body>
</html>














Comments

Post a Comment

Popular posts from this blog

Write a program to Sum of Digits in JQuery?

Write a program to accept a no. from user and display Sum of Digits. (example: 214= 2+1+4 =  7) < !DOCTYPE html> <html> <head>   <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>    <script type="text/javascript"> $(document).ready(function(){ $("#btn").click(function(){ var x = 0; var y = parseInt($("#sum").val()); while(y>0) { x = x + y % 10; y = Math.floor(y/10); } alert("sum of digits " + x); }); }); </script> </head> <body> <div> <h2>Su...
Read more

Simple calculator using JQuery and HTML..

<html> <head> <title>Two textbox, when enter data in one textbox, it appears in second textbox</title> <link rel="stylesheet" type="text/css" href="style.css"> /<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Addition $("#add").click(function(){ var a = $("#cal1").val();   var b = $("#cal2").val(); $("#result").val(+a + +b); }); //Subtraction $("#sub").click(function(){ var a = $("#cal1").val();    var b = $("#cal2").val(); $("#result").val(+a - +b); }); //Multiplication $("#mul").click(function(){ var a = $("#cal1").val();   v...
Read more