display user end error before submitting a form

Question

I have a form through which i wish to add values in database. it is working fine, for validation i have added server end validation, but the errors if any get displayed after the form has been submitted, i wish to use user end validation in a way that if a user does not enter a field, is not entering a proper format or the password do not match, the error should get displayed simultaneously i.e before hitting the submit button. Can anyone tell how it can be done

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {


        if (empty($_POST["email"])) 
            {
                $emailErr = "Email is required";
            } 
        else
            {
                $email =$_POST["email"];
            }

        if (empty($_POST["password"])) 
            {
                $pswrdErr = "password is required";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        if ($_POST["password"]!=$_POST["retype_password"]) 
            {
                $pswrdErr = "password does not match";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        //insert query to add values in database

    } 
?>          
<form name="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" >
    <input type="text" placeholder="Name"  name="name"/>
    <input type="email"  placeholder="Email" name="email"/>
    <input type="password" placeholder="Password"  name="password"/>
    <input type="password" placeholder="Retype Password"  name="retype_password"/>
    <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">Register</button>
</form>

Possible duplicate of [javascript form validation with password confirming](http://stackoverflow.com/questions/16990378/javascript-form-validation-with-password-confirming) — Gavriel, Jan 27 '16 at 07:25
duplicate of: http://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script — Gavriel, Jan 27 '16 at 07:28

score 0 · Answer 1 · answered Jan 27 '16 at 07:27

0

use jquery code for client side validation

$(form).submit(function(e){
  if($("input[name='name']").val()=="")
  {
    e.preventDefault();//this will stop form from submitting
    //show msg name is required
  }
});

answered Jan 27 '16 at 07:27

Muhammad Atif

1,050
1
9
21

score 0 · Accepted Answer · answered Jan 27 '16 at 07:34

You can try this

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>    
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") 
    {
        if (empty($_POST["email"])) 
            {
                $emailErr = "Email is required";
            } 
        else
            {
                $email =$_POST["email"];
            }

        if (empty($_POST["password"])) 
            {
                $pswrdErr = "password is required";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        if ($_POST["password"]!=$_POST["retype_password"]) 
            {
                $pswrdErr = "password does not match";
            }   
        else 
            {
                $password = $_POST["password"];
            }   

        //insert query to add values in database

    } 
?>          
<form name="form" id="register-form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" >
    <input type="text" placeholder="Name"  name="name"/>
    <input type="email"  placeholder="Email" name="email"/>
    <input type="password" placeholder="Password"  name="password" id="password"/>
    <input type="password" placeholder="Retype Password"  name="retype_password" id="retype_password"/>
    <button name ="submit" value = "submit" class="btn btn-greensea b-0 br-2 mr-5">Register</button>
</form>


<script>
    (function($,W,D)
    {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function()
            {
                //form validation rules
                $("#register-form").validate({
                    rules: {
                        name: "required",
                        email: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true,
                            minlength: 5,
                        },
                        retype_password: {
                            equalTo :'#password'
                        }
                    },
                    messages: {
                        name: "Please enter your name",
                        password: {
                            required: "Please provide a password",
                            minlength: "Your password must be at least 5 characters long",
                        },
                        email: "Please enter a valid email address",
                        agree: "Please accept our policy"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

    })(jQuery, window, document);
</script>
</body>
</html>

display user end error before submitting a form

2 Answers2