Validate form in PHP and JavaScript

Question

I am creating a simple registration form page(register.html): First Name, Last Name, Email, Username, Password, Confirm Password. I have it set to validate the input client side in JavaScript and if that passes it goes to register.php which validates the data on the back end before making it safe and adding it to the database. All of that is working fine.

However, there is a problem if say for example the validation on the back end fails. I don't want the client to lose all the information they entered and have to do it all again, but since it already loaded register.php all that form data is now sitting in the PHP script but on a new page. And I am unsure how to deal with this problem. I could create a duplicate form on the register.php page and use the PHP script to refill the form if it fails on the back end. But if I am going to do that I might as well just put the PHP code into my register.html and run it all that way. But when I change action="register.html" to action="" and put my PHP code in there, nothing happens. I've searched around and looked into isset but that doesn't seem to run either, the HTML page just reloads and clears all the fields, and I don't even see any echoes or anything.

    <!DOCTYPE HTML>
<html>
    <head>
        <title>Family Beacon Registration</title>
        <style>
            .required {color: #FF0000;}
            .error {color: #FF0000;}
        </style>
        <script type="text/javascript">
            function validate()
            {
                var hasErrors = false;

                var first_name = document.forms["registration_form"]["first_name"].value;
                if(first_name == "")
                {
                    document.getElementById("first_name_error").innerHTML = "* First Name is a required field";
                    hasErrors = true;
                }
                else
                    document.getElementById("first_name_error").innerHTML = "*";

                var last_name = document.forms["registration_form"]["last_name"].value;
                if(last_name == "")
                {
                    document.getElementById("last_name_error").innerHTML = "* Last Name is a required field";
                    hasErrors = true;
                }
                else
                    document.getElementById("last_name_error").innerHTML = "*";

                var email = document.forms["registration_form"]["email"].value;
                if(email == "")
                {
                    document.getElementById("email_error").innerHTML = "* Email is a required field";
                    hasErrors = true;
                }
                else if(email.length > 40)
                {
                    document.getElementById("email_error").innerHTML = "* Email must be less than 40 characters in length.";
                    hasErrors = true;
                }
                else if(email.indexOf("@") == -1)
                {
                    document.getElementById("email_error").innerHTML = "* A valid e-mail address is required";
                    hasErrors = true;
                }
                else
                    document.getElementById("email_error").innerHTML = "*";

                var username = document.forms["registration_form"]["username"].value;
                if(username == "")
                {
                    document.getElementById("username_error").innerHTML = "* Username is a required field";
                    hasErrors = true;
                }
                else if(username.length < 3 || username.length > 20)
                {
                    document.getElementById("username_error").innerHTML = "* Username must be between 3 and 20 characters in length";
                    hasErrors = true;
                }
                else
                    document.getElementById("username_error").innerHTML = "*";

                var password = document.forms["registration_form"]["password"].value;
                if(password == "")
                {
                    document.getElementById("password_error").innerHTML = "* Password is a required field";
                    hasErrors = true;
                }
                else if(password.length < 8 || password.length > 20)
                {
                    document.getElementById("password_error").innerHTML = "* Passwords must be between 8 and 20 characters in length";
                    hasErrors = true;
                }
                else
                    document.getElementById("password_error").innerHTML = "*";

                var confirm_password = document.forms["registration_form"]["confirm_password"].value;
                if(confirm_password == "")
                {
                    document.getElementById("confirm_password_error").innerHTML = "* Confirm Password is a required field";
                    hasErrors = true;
                }
                else if(confirm_password != password)
                {
                    document.getElementById("confirm_password_error").innerHTML = "* Passwords do not match";
                    document.getElementById("password_error").innerHTML = "* Passwords do not match";
                    hasErrors = true;
                }
                else
                    document.getElementById("confirm_password_error").innerHTML = "*";

                return !hasErrors;
            }
        </script>
    </head>
    <body>  
        <h2>Family Beacon Registration</h2>
        <p><span class="required" id="required">* required field</span></p>
        <form name="registration_form" action="register.php" onsubmit="return validate();" method="post">
            First Name:<input type="text" name="first_name" id="first_name" />
            <span class="error" id="first_name_error">* </span><br><br>
            Last Name:<input type="text" name="last_name" id="last_name" />
            <span class="error" id="last_name_error">* </span><br><br>
            E-Mail:<input type="text" name="email" id="email" />
            <span class="error" id="email_error">* </span><br><br>
            Username:<input type="text" name="username" id="username" />
            <span class="error" id="username_error">* </span><br><br>
            Password:<input type="password" name="password" id="password" />
            <span class="error" id="password_error">* </span><br><br>
            Confirm Password:<input type="password" name="confirm_password" id="confirm_password" />
            <span class="error" id="confirm_password_error">* </span><br><br>
            <input type="reset" name="reset" value="Reset" />
            <input type="submit" name="submit" value="Register" />
        </form>
    </body>
</html>

Instead of a normal form submission, send the data to the .php via an AXJAX request. Then the form fields will not empty out. — Scott Marcus
– Scott Marcus, Commented May 12, 2018 at 19:30
If validation fails server-side, can you not just send the user back to the previous page and then also send a payload with their form data? You can use JS to fill all inputs back in based on the payload. — VLAZ
– VLAZ, Commented May 12, 2018 at 19:44

Razin Abid · Accepted Answer · 2018-05-12 20:01:11Z

First of all, One of your wrong concept is to put PHP code in a HTML extension file named register.html which will never work. 2nd thing is there are 3 solutions for this problem - Using AJAX Call - Using Self execution PHP file with the form and code. - Using Session (Which I prefer the least solution).

For the first solution is the best way to use JQuery with AJAX call. To do so just use an ID for the form like this

   <form id="myForm">
    Your Form element goes here...
   </form>

Then use jquery just like this

<script type='text/javascript'>
 $(document).ready(function(){
   $("#myForm").submit(function(){
     Your Validation code goes here.If all is ok then ...
     $.post("your_php_file_path.php",$(this)..serializeArray(),function(data){
   //here is the data is the echo you did in that php file
   //like echo "OK",you'll find data is set as string "OK"
     });
   });
});
</script>

Second is same page PHP and form works like this

<form action='<?php echo $_SERVER["PHP_SELF"] ?>' method='post'>
Your Form element like this
<input type='text' name='username' value='<?php echo isset($_POST['username'])?$_POST['username']:"" ?>'
</form>

And at the very top your page use php as this

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
}
?>

This way you can handle error so easily like this

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
if(your_error_condition_occur){
   $Error = "Error Message";
  }
}
?>

And in HTML Section use this

 <?php
  if(isset($Error)){
   echo $Error;
   }
 ?>

You can use session for page to page data transfer without loosing them but usually session is used for login verification so I say don't use that.

Mini · Accepted Answer · 2018-05-12 19:36:30Z

0

What I do, which may work for you, is:

Use jquery $(window).on("beforeunload"

so something like:

$(window).on("beforeunload", function() { 
    //get all the data from inputs
    //set cookie with JSON.stringify(yourData)
})

Then on body load:

if your cookie exists, JSON.parse it and put it into your inputs

Edit: I can provide some example code should you want it. Also, upon successful submission, in the php, do something like unset($_COOKIE['yourcookie']) so that upon successful submission your form doesn't keep their inputs :)

answered May 12, 2018 at 19:36

Mini

4515 silver badges18 bronze badges

Comments

Przemysław Niemiec · Accepted Answer · 2018-05-12 19:41:44Z

0

Read about AJAX: https://www.w3schools.com/js/js_ajax_php.asp

AJAX means: Asynchronous JavaScript and XML

Asynchronous menas, that you will be NOT redirected to this file. You will stay in your file and wait for server response. If the response will be negative, you can to show some info for user, and if the response will be positive, you can redirect user to another page. Until the response wil be positive, you do not need to redirect user to another page, so you can keep your data in input fields.

answered May 12, 2018 at 19:41

Przemysław Niemiec

1,6961 gold badge13 silver badges15 bronze badges

Comments

Michael Tétreault · Accepted Answer · 2018-05-12 20:09:54Z

Instead of using html post to register.php in a form, i recommend using Ajax call with javascript and even simpler with jQuery, if you have it loaded, you could do something like this:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Family Beacon Registration</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <style>
            .required {color: #FF0000;}
            .error {color: #FF0000;}
        </style>
    </head>
    <body>  
        <h2>Family Beacon Registration</h2>
        <p><span class="required" id="required">* required field</span></p>
        <div id="form">
            First Name:<input type="text" name="first_name" id="first_name" />
            <span class="error" id="first_name_error">* </span><br><br>
            Last Name:<input type="text" name="last_name" id="last_name" />
            <span class="error" id="last_name_error">* </span><br><br>
            E-Mail:<input type="text" name="email" id="email" />
            <span class="error" id="email_error">* </span><br><br>
            Username:<input type="text" name="username" id="username" />
            <span class="error" id="username_error">* </span><br><br>
            Password:<input type="password" name="password" id="password" />
            <span class="error" id="password_error">* </span><br><br>
            Confirm Password:<input type="password" name="confirm_password" id="confirm_password" />
            <span class="error" id="confirm_password_error">* </span><br><br>
            <input type="reset" name="reset" value="Reset" />
            <input id="formSubmit" type="submit" name="submit" value="Register" />
        </div>
        <script>
            $(function() {
                $("#formSubmit").click(function() {
                    var hasErrors = false,
                        first_name = document.forms["registration_form"]["first_name"].value,
                        last_name = document.forms["registration_form"]["last_name"].value,
                        email = document.forms["registration_form"]["email"].value,
                        username = document.forms["registration_form"]["username"].value,
                        password = document.forms["registration_form"]["password"].value,
                        confirm_password = document.forms["registration_form"]["confirm_password"].value;
                    if(first_name == "") {
                        document.getElementById("first_name_error").innerHTML = "* First Name is a required field";
                        hasErrors = true;
                    } else {
                        document.getElementById("first_name_error").innerHTML = "*";
                    }
                    if(last_name == "") {
                        document.getElementById("last_name_error").innerHTML = "* Last Name is a required field";
                        hasErrors = true;
                    } else {
                        document.getElementById("last_name_error").innerHTML = "*";
                    }
                    if(email == "") {
                        document.getElementById("email_error").innerHTML = "* Email is a required field";
                        hasErrors = true;
                    } else if(email.length > 40) {
                        document.getElementById("email_error").innerHTML = "* Email must be less than 40 characters in length.";
                        hasErrors = true;
                    } else if(email.indexOf("@") == -1) {
                        document.getElementById("email_error").innerHTML = "* A valid e-mail address is required";
                        hasErrors = true;
                    } else {
                        document.getElementById("email_error").innerHTML = "*";
                    }
                    if(username == "") {
                        document.getElementById("username_error").innerHTML = "* Username is a required field";
                        hasErrors = true;
                    } else if(username.length < 3 || username.length > 20) {
                        document.getElementById("username_error").innerHTML = "* Username must be between 3 and 20 characters in length";
                        hasErrors = true;
                    } else {
                        document.getElementById("username_error").innerHTML = "*";
                    }
                    if(password == "") {
                        document.getElementById("password_error").innerHTML = "* Password is a required field";
                        hasErrors = true;
                    } else if(password.length < 8 || password.length > 20) {
                        document.getElementById("password_error").innerHTML = "* Passwords must be between 8 and 20 characters in length";
                        hasErrors = true;
                    } else {
                        document.getElementById("password_error").innerHTML = "*";
                    }
                    if(confirm_password == "") {
                        document.getElementById("confirm_password_error").innerHTML = "* Confirm Password is a required field";
                        hasErrors = true;
                    } else if(confirm_password != password) {
                        document.getElementById("confirm_password_error").innerHTML = "* Passwords do not match";
                        document.getElementById("password_error").innerHTML = "* Passwords do not match";
                        hasErrors = true;
                    } else {
                        document.getElementById("confirm_password_error").innerHTML = "*";
                    }

                    if(!hasErrors) {
                        $.post( "register.php", {
                            first_name: first_name,
                            last_name: last_name,
                            email: email,
                            username: username,
                            password: password,
                            confirm_password: confirm_password
                        })
                        .done(function(data) {
                            // Data is the PHP echoed output.
                            alert(data);
                        })
                        .fail(function() {
                            alert( "error" );
                        });
                    }
                });
            });
        </script>
    </body>
</html>

Collectives™ on Stack Overflow

Validate form in PHP and JavaScript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related