CODEWITHSUNDEEP
javascriptarraysvalidationinput
user3222552
user3222552

Reputation: 37

How to reject use of certain words in a form?

I am new to Javascript. I need to make an username input, then validate it. The username entered must not be one of the elements in this array: ["admin", "administrator", "demo", "user"] etc. The array can be longer.

I made this so far, but it works only for the 1st element in the array.

function arrayValidation () {
    nonoUser = ["username", "admin", "administrator", "demo"];
    valueOfInput = document.getElementById("user").value; // "user" here is id of input
    for (var i = 0; i < nonoUser.length; i++) {
        if (valueOfInput == nonoUser[i]) {
            alert("you cant use this username");
        }else {
            return; 
        }
    }
}

Upvotes: 0

Views: 202

Answers (4)

Josh Harrison
Josh Harrison

Reputation: 6004

The comments here should help you to see why your code isn't working as you expect:

// Your original code:

function arrayValidation () {
    nonoUser = ["username", "admin", "administrator", "demo"];
    valueOfInput = document.getElementById("user").value; // "user" here is id of input
    for (var i = 0; i < nonoUser.length; i++) {
        if (valueOfInput == nonoUser[i]) {
            alert("you cant use this username");
        } else {

            // Using return here is the problem. 
            // This else block will run if a valid username was entered.
            // The return statement stops execution of the function, thus ending the loop. 
            // So if the loop passes the test the first time, this return 
            // statement will stop the loop and function from completing 
            // the checks against the other keywords. 

            return; 
        }
    }
}

This is your code modified to work as you expect:

function arrayValidation () {
    nonoUser = ["username", "admin", "administrator", "demo"];
    valueOfInput = document.getElementById("user").value; // "user" here is id of input
    for (var i = 0; i < nonoUser.length; i++) {
        if (valueOfInput == nonoUser[i]) {
            alert("you cant use this username");

            // We can end the function check return here.
            // There's no point checking the others, as we've found an invalid one. 

            return false; // Return a meaningful result
        }

        // No need for an else statement either.

    }
}

As many have pointed out, client side validation should be considered an optional extra, and server-side validation as essential.

Upvotes: 0

Cerbrus
Cerbrus

Reputation: 72947

Try this:

function arrayValidation () {
    nonoUser = ["username", "admin", "administrator", "demo"];
    valueOfInput = document.getElementById("user").value; // "user" here is id of input
    var isValid = true;
    for (var i = 0; i < nonoUser.length && isValid; i++) {
        if (valueOfInput == nonoUser[i]) {
            isValid = false;
        }
    }
    if (isValid) {
        // Username is valid
    }else{
        // Username is invalid
    }
}

However, you should never trust data that's sent to the server (Validate server-side as well)
It's trivial to change the js as a user.

Upvotes: 2

Prisoner
Prisoner

Reputation: 27628

This should point you in the right direction:

document.getElementById("user").onkeyup = function(){
    var nonoUser = ["username", "admin", "administrator", "demo"];
    nonoUser.indexOf(this.value) === -1 ? false : this.value = '';
}

demo: http://jsfiddle.net/Le2xC/

I also hope you're validating this server-side as well, otherwise users will still be able to use your "nono" usernames.

Upvotes: 1

Chris Brickhouse
Chris Brickhouse

Reputation: 648

you need to add return false; to the code section with the alert, not the else statement.

Upvotes: 0

Related Questions