Check for special characters (, ; .) while validating a form with JavaScript

Question

I tried to insert this piece of code (which I had found on a website) on my (working) validation script:

if (register.username.match(/\W/)) {
    alert('You have special characters on username field.');
    return false;
}

It did nothing, and it also prevented the whole script from working.

This is the html form (not the whole thing):

<form name="register" method="POST" action="registar.php" onsubmit="return validateForm();">
    <ul class="left-form">
        <h2>Nova conta:</h2>
        <li>
            <input type="text" name="username" placeholder="Username" required/>
            <div class="clear"> </div>
        </li>
        <li>
            <input type="text" name="email" placeholder="Email" required/>
            <div class="clear"> </div>
        </li>
        <li>
            <input type="password" name="pass" placeholder="Password" required/>
            <div class="clear"> </div>
        </li>
        <li>
            <input type="password" name="pass_confirm" placeholder="Confirmar a password" required/>
            <div class="clear"> </div>
        </li>
        <input type="submit" value="Registar">
        <div class="clear"> </div>
    </ul>
</form>

And this is my Javscript code (without the special characters checking):

function validateForm() {
    if (register.username.value.length <= 2) {
        alert("O username escolhido é demasiado curto.");
        return false;
    }
    if (register.username.value.length > 20) {
        alert("O username escolhido é demasiado longo.");
        return false;
    }
    var x = register.email.value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("O email inserido parece ser inválido.");
        return false;
    }
    if (register.username.value == register.pass.value) {
        alert("Por questões de segurança, pedimos que use uma password diferente do seu nome de utilizador.");
        return false;
    }
    if ((register.pass.value.length < 6) || (register.pass.value.length > 20)) {
        alert("Certifique-se que a sua password tem entre 6 e 20 letras.");
        return false;
    }
    if (register.pass.value != register.pass_confirm.value) {
        alert("As passwords não condizem.");
        return false;
    }
    return true;
}

Ignore the alerts as they are only the display messages.

Can someone write a piece of code which checks for special characters (! , . + * etc.) or tell me what's wrong with the code I used?

Just grabbing random script you find on a website and applying it to your code without understanding what it does isn't a successful route to development excellence. Spend some time learning about the language and environment in which you're working, and you'll be able to make these sorts of changes in your sleep. In this case, you're probably looking for [regular expressions](https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions). — T.J. Crowder, Jan 21 '15 at 11:37
@T.J.Crowder thank you for that page! I'll be sure to read and study it. — Bruno Dayz, Jan 21 '15 at 11:42
Do note that I'm a student and all this is new to me. That is why I came to seek help and guidance on this website, as most of my questions were answered here — Bruno Dayz, Jan 21 '15 at 11:43
possible duplicate of [Special character validation using JavaScript](http://stackoverflow.com/questions/839483/special-character-validation-using-javascript) — Farid Nouri Neshat, Jan 21 '15 at 12:22

score 2 · Accepted Answer · answered Jan 21 '15 at 12:35

You probably should change the code to this:

if (register.username.value.match(/\W/)) {
   alert('You have special characters on username field.');
   return false;
}

What's the difference? Well if you have realized I added .value in the middle. Because register.username would refer to the username input element and it doesn't have a match method. We need to check the text entered in it. By checking input element reference, you can realize we use it's value property which returns the text entered. So register.username.value is the text entered by the user and since it's a string we can use .match method on it.

You can now pass any regex to the match method that would satify your needs. Check the guide on regex also.

Also always check for errors shown in the developer console.

Thank you! It was a big fail on my part not to notice the missing `.value`, honestly. — Bruno Dayz, Jan 21 '15 at 12:42

Check for special characters (, ; .) while validating a form with JavaScript

1 Answers1