CODEWITHSUNDEEP
javascripthtml
user3103155
user3103155

Reputation: 75

PHP JavaScript Clientside validation not occuring

I have made an XHTML1.1 Form which validates well via the PHP server. However the JavaScript validation is not working as the form is submitted to the server before JavaScript checks for errors. JavaScript code

JavaScript

<script type="text/javascript"> 

        function checkall()
        {


                var Username = document.getElementById('Username').value;
                var Password = document.getElementById('Password').value;
                var Password2 = document.getElementById('Password2').value;


                var UsernameMessage = document.getElementById('UsernameMessage').value;
                var PasswordMessage = document.getElementById('PasswordMessage').value;
                var PasswordMessage2 = document.getElementById('PasswordMessage2').value;



            if (Username == "") 
        {
            UsernameMessage.innerHTML = "Choose your username";
            return false;
        }   else UsernameMessage.innerHTML = "";


            if (Password == "") 
        {
            PasswordError.innerHTML = "Enter a password";
            return false;
        }   else EmailError.innerHTML = "";


            if (Password2 == "") 
        {
            PasswordError2.innerHTML = "Confirm your password";
            return false;
        }   else EmailError.innerHTML = "";

            if (Password2 == Password) 
        {   
            EmailError.innerHTML = "";
        }   else PasswordError2.innerHTML = "Confirm your password";
            return false;

        }
            </script>

HTML:

<form action="sign_up.php" method="post" onsubmit='return checkall()'> 
Username: <input type="text" name="Username" id="Username"  />  <label id='UsernameMessage'></label>
Password: <input type="text" name="Password" id="Password"  />  <label id='PasswordMessage'></label>
Confirm Password: <input type="text" name="Password2" id="Password2"  /> <label id='PasswordMessage2'></label>
<input type="submit" value="Register" name="submit" />

Upvotes: 0

Views: 53

Answers (1)

putvande
putvande

Reputation: 15213

There is a lot wrong with your code. You have a few variables defined:

var UsernameMessage = document.getElementById('UsernameMessage').value;
var PasswordMessage = document.getElementById('PasswordMessage').value;
var PasswordMessage2 = document.getElementById('PasswordMessage2').value;

These should be without .value because later on you are trying to set their innerHTML. Further in your code you are trying to fill these with the wrong variables. Also, you have EmailError which is not defined. Guessing it should be the same as the other elements you need to add an element and define the variable. So all and all it should be something like:

JS:

function checkall() {

    var Username = document.getElementById('Username').value;
    var Password = document.getElementById('Password').value;
    var Password2 = document.getElementById('Password2').value;

    var UsernameMessage = document.getElementById('UsernameMessage');
    var PasswordMessage = document.getElementById('PasswordMessage');
    var PasswordMessage2 = document.getElementById('PasswordMessage2');
    var EmailError = document.getElementById('EmailError');

    if (Username == "") {
        UsernameMessage.innerHTML = "Choose your username";
        return false;
    } else UsernameMessage.innerHTML = "";

    if (Password == "") {
        PasswordMessage.innerHTML = "Enter a password";
        return false;
    } else EmailError.innerHTML = "";

    if (Password2 == "") {
        PasswordMessage2.innerHTML = "Confirm your password";
        return false;
    } else EmailError.innerHTML = "";

    if (Password2 == Password) {
        EmailError.innerHTML = "";
    } else {
       // The return must occur inside {}
       // Otherwise, the function will *always* return false.
        PasswordMessage2.innerHTML = "Confirm your password";
        return false;
    }

}

and HTML:

<form action="sign_up.php" method="post" onsubmit='return checkall()'>Username:
    <input type="text" name="Username" id="Username" />
    <label id='UsernameMessage'></label>Password:
    <input type="text" name="Password" id="Password" />
    <label id='PasswordMessage'></label>Confirm Password:
    <input type="text" name="Password2" id="Password2" />
    <label id='PasswordMessage2'></label>
    <!-- extra HTML element for your emailerror -->
    <div id="EmailError"></div>
    <input type="submit" value="Register" name="submit" />
</form>

Upvotes: 1

Related Questions