CODEWITHSUNDEEP
javascriptphpalert
InsignificantPuppet
InsignificantPuppet

Reputation: 53

Javascript and PHP alert box issue

Hey guys I'm still sorta new to php and javascript 3-4 weeks now and I'm having an issue with my javascript and php with a form ive been using.

What its supposed to do is pretty simple put something wrong in and an alert will tell you where your input is wrong at.

Okay so whats happening is that my javascript actually runs (ive even color coded it to tell you its wrong) and an alert is supposed to come up and tells you a list of things that are wrong, but the alert isnt coming up and it basically tells you its wrong (i can tell because the input boxes changes color) and there is no error output.

I'm thinking its something with my php because my javascript is pretty much right (I hope) ill post both of them anyway.

PHP:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Register</title>
    <link rel="stylesheet" type="text/css" href="home.css" />
    <script type="text/javascript" src="rego1.js"></script>
</head>
<body>
<h1>Registration</h1>
<div id="navigation">
    <ul>
        <li><a href="home.php">Home</a></li>
        <li>User Registration</li>
        <li><a href="userlogin.php">User Login</a></li>
        <li><a href="adminlogin.php">Administrator Login</a></li>
        <li><a href="termsCond.php">Terms & Conditions</a></li>
    </ul>
</div>  
    <h2>Please Fill out the form</h2>
    <?php
        $displayForm = true;
        if(isset($_POST['Submit'])){
            $displayForm = false;
        }
        if($displayForm){
        ?>
        <form action="rego.php" method="post" name="validForm" onsubmit="return validationForm(this)">
            <p>First name: <input type="text" name="FirstName" />*</p>
            <p>Middle Name: <input type="text" name="MiddleName" /></p>
            <p>Family name: <input type="text" name="FamilyName" />*</p>
            <p>Chosen Username: <input type="text" name="UserName" />*</p>
            <p>Address: <input type="text" name="Address" />*</p>
            <p>State: <input type="text" name="State" />*</p>
            <p>Postcode: <input type="text" name="PostCode" />*</p>
            <p>Telephone: <input type="text" name="Phone" />*</p>
            <p>Email: <input type="text" name="Email" />*</p>
            <p>Password: <input type="text" name="Password" />*</p>
            <p>Confirm password: <input type="text" name="ConfirmPassword" />*</p>

            <p><input name="Submit" value="Send" type="submit" ></p>
        </form>

        <?php
        }
    ?>


</body>
</html>

Javascript:

function validationForm(regoForm) {
var formInput = "";

  formInput += validateFirstName(regoForm.FirstName);
  formInput += validateFamilyName(regoForm.FamilyName);
  formInput += validateUserName(regoForm.UserName);
  formInput += validateAddress(regoForm.Address);
  formInput += validateState(regoForm.State);
  formInput += validatePostCode(regoForm.PostCode);
  formInput += validatePhone(regoForm.Phone);
  formInput += validateEmail(regoForm.Email);
  formInput += validatePassword(regoForm.Password);
  formInput += validatePasswordConfirm(regoForm.PasswordConfirm);

  if (formInput != "") {
    window.alert("Some fields need to be Corrected \n" +  formInput);
    return false;
  }

  return true;
}

function validateFirstName(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a First Name"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validateFamilyName(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a First Name"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validateUserName(input) {
    var inputError = "";
    var allowChars = /\W/; // this will allow only letters, numbers, underscores

    if (input.value == "") {
        input.style.background = 'Red'; 
        inputError = "Username has not been entered\n";
    } else if ((input.value.length < 5) || (input.value.length > 15)) {
        input.style.background = 'Red'; 
        inputError = "Username is the wrong length\n";
    } else if (allowChars.test(input.value)) {
        input.style.background = 'Red'; 
        inputError = "Username has the wrong characters\n";
    } else {
       input.style.background = 'White';
    } 
    return inputError;
}

function validateAddress(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a Address\n"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validateState(input) {
    var inputError = "";

    if (input.value.length == 0) {
        input.style.background = 'Red'; 
        inputError = "You have not given a State\n"
    } else {
        input.style.background = 'White';
    }
    return inputError;   
}

function validatePostCode(input) {
    var inputError = "";

    if (input.value == "") {
        input.style.background = 'Red'; 
        inputError = "Postcode has not been entered\n";
    } else if ((input.value.length < 4) || (input.value.length > 4)) {
        input.style.background = 'Red'; 
        inputError = "Postcode must have 4 numbers\n";
    } else {
       input.style.background = 'White';
    } 
    return inputError;
}

function validatePhone(input) {
    var inputError = "";
    var phone = input.value.replace(/[\(\)\.\-\ ]/g, '');     

   if (input.value == "") {
        inputError = "Phone number not entered\n";
        input.style.background = 'Red';
    } else if (isNaN(parseInt(phone))) {
        inputError = "Phone number does not have correct characters\n";
        input.style.background = 'Red';
    } else if (!(phone.length == 10)) {
        inputError = "Phone number is the wrong length";
        input.style.background = 'Red';
    } 
    return inputError;
}

function trim(x)
{
  return x.replace(/^\s+|\s+$/, '');
} 

function validateEmail(input) {
    var inputError="";
    var trimInput = trim(input.value);                        // value of field with whitespace trimmed off
    var email = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var allowChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (input.value == "") {
        input.style.background = 'Red';
        inputError = "Email address not entered\n";
    } else if (!emailFilter.test(trimInput)) {              //test email for illegal characters
        input.style.background = 'Red';
        inputError = "Email is not valid\n";
    } else if (input.value.match(allowChars)) {
        input.style.background = 'Red';
        inputError = "Email does not have correct characters\n";
    } else {
        input.style.background = 'White';
    }
    return inputError;
}

function validatePassword(input) {
    var inputError = "";
    var allowChars = /[\W_]/; // this will only allow numbers and letters

    if (input.value == "") {
        input.style.background = 'Red';
       inputError = "You didn't enter a password.\n";
    } else if ((input.value.length < 5) || (input.value.length > 15)) {
        inputError = "Password is at at the wrong length\n";
        input.style.background = 'Red';
    } else if (illegalChars.test(input.value)) {
        inputError = "Password has wrong characters\n";
        input.style.background = 'Red';
    } else if (!((input.value.search(/(a-z)+/)) && (input.value.search(/(0-9)+/)))) {
        inputError = "The password must have a proper value.\n";
        input.style.background = 'Red';
    } else {
        input.style.background = 'White';
    }
   return inputError;
}

function validatePasswordConfirm(){
    var inputError ="";
    var password1 = document.getElementById('Password');
    var password2 = document.getElementById('ConfirmPassword');

    if(password1 == password2.value){
        input.style.background = 'White';   
    }
    else{
        inputError = "The confirmation password is not the same\n";
        input.style.background = 'Red';
    }
    return inputError;
}

Upvotes: 2

Views: 384

Answers (2)

Hannes Schneidermayer
Hannes Schneidermayer

Reputation: 5717

It almost works. validatePasswordConfirm(); contains two bugs. Let's have a closer look:

First, pass input as a paramter, like in your other functions:

function validatePasswordConfirm(input) { }

Then, add the id to the password fields like Harikrishnan told you:

<p>Password: <input type="text" name="Password" id="Password" />*</p>
<p>Confirm password: <input type="text" name="ConfirmPassword" id="ConfirmPassword" />*</p>

This is because you call getElementById and have no such id in your document. Because of the JS errors, your form will get submitted whatsoever.

After fixing this, you code works fine.

Upvotes: 1

Harikrishnan Viswanathan
Harikrishnan Viswanathan

Reputation: 123

Add id attribute to the password fields.

        <p>Password: <input type="text" name="Password" id="Password" />*</p>
        <p>Confirm password: <input type="text" name="ConfirmPassword" id="ConfirmPassword" />*</p>

Upvotes: 0

Related Questions