AJJ
AJJ

Reputation: 897

Validation code problems?

I have some code written in javascript that validates entered numbers in a field based on a set of allowable numbers.The problem im having is that even if i enter the right numbers it returns false. Here is my code:

window.onload=function() {

var validNumbers = {
 "2474": 2474,
 "2750": 2750,
 "2753": 2753,
 "2760": 2760,
 "2777": 2777
};
function validate(num) {
return typeof validNumbers[num] !== "undefined";
};

var button = document.getElementById("submit"),
userInput = document.getElementById("post");
button.onclick = function(event) {
alert("Please enter a correct postcode");
};
}

<form name="eoiform" form method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi">

<input type="text" id="post" name="post"><?php echo $msgp; ?></td>

<input type="submit" name="submit" id="submit" value="submit">

</form>

Could anyone provide some insight on my mistakes? Or possibly a better way to write this out?

Upvotes: 0

Views: 68

Answers (2)

slinky2000
slinky2000

Reputation: 2673

What about this? considering your validate function NEVER get's called.

var validNumbers = {
    "2474": 2474,
    "2750": 2750,
    "2753": 2753,
    "2760": 2760,
    "2777": 2777
};

function validate(num) {
    return typeof validNumbers[num] !== "undefined";
};

var button = document.getElementById("submit"),
    userInput = document.getElementById("post");

button.onclick = function(event) {
    var val = validate(userInput.value)
    if(!val) {
        alert("Please enter a correct postcode");
        return false;
    } else {
        alert("Thanks");
        // Run your code here
        // Form will submit
    }
};

http://jsfiddle.net/n7SxE/

Upvotes: 1

adeneo
adeneo

Reputation: 318182

Seems complicated? just parse the inputted value as an integer, and check it against an array, if the value exists in the array, submit the form, if not alert the message and return false.

You should validate on the submit event, as there are other ways to submit a form than just clicking a button (like hitting enter in the input box).

Place the script after the HTML, and get rid of that window.onload at the same time :

<form name="eoiform" form method="POST" action="<?php echo $_SERVER["PHP_SELF"];?>" id="eoi">
    <input type="text" id="post" name="post"><?php echo $msgp; ?></td>
    <input type="submit" name="submit" id="submit" value="submit">
</form>
<script>
    var form         = document.getElementById('eoi'),
        validNumbers = [2474,
                        2750,
                        2753,
                        2760,
                        2777
                       ];

    form.onsubmit = function() {
        var userInput = document.getElementById("post"),
            numb      = parseInt(userInput.value, 10);

        if ( validNumbers.indexOf(numb) == -1 ) {
            alert("Please enter a correct postcode");
            return false;
        }else{
            return true;
        }
    }
</script>

FIDDLE

Upvotes: 2

Related Questions