1
\$\begingroup\$

Could this code be improved? Would you suggest more sophisticated way of doing client-side signup validation? 

<!DOCTYPE html>
<html>
<head>
    <script>
        function validateForm() {
            var name = document.forms["registrationForm"]["username"].value;
            if (name == null || name == "") {
                alert("Name must be filled out");
                return false;
            }
            var password = document.forms["registrationForm"]["password"].value;
            var repeatPassword = document.forms["registrationForm"]["passwordAgain"].value;
            if (password.length < 8) {
                alert("Password should contain 8 symbols or more");
                return false;
            }
            if (password != repeatPassword) {
                alert("Filled out passwords should match");
                return false;
            }
        }
    </script>
</head>
<body>
<h3>SignUp Form</h3>
<form name="registrationForm" onsubmit="return validateForm()" action="registration" method="post">
    Email:<input type="text" name="username"/><br/><br/>
    Password:<input type="password" name="password"/><br/><br/>
    Repeat Password:<input type="password" name="passwordAgain"/><br/><br/>
    <input type="submit" value="signup"/>
</form>
</body>
</html>
Improve this question
\$\endgroup\$
2
  • 1
    \$\begingroup\$ You could use the required and minlength attributes on <input>. \$\endgroup\$
    – gcampbell
    Jul 12, 2016 at 9:40
  • \$\begingroup\$ @gcampbell sounds like an answer \$\endgroup\$
    – Pimgd
    Jul 12, 2016 at 11:37

3 Answers 3

Reset to default
1
\$\begingroup\$

I would suggest a more sophisticated way of doing client-side validation. This all depends on what your design is (if the customer wants it this way, then that's it), but personally, I'd prefer it if you check the field after I've edited it, and if it is not correct, that you change the styling on the field, maybe set an error label.

Right now you're throwing alert dialogs around which disrupt flow. By making the validation reactive like that, the user has instant feedback, rather than "do -> submit -> error -> repeat" which is a cycle that causes frustrations. Imagine you had a separate check for a single digit, or a check to see if there'a capital in the password, and a check that you're using at least 1 special symbol... the user would trigger these warnings one at a time; they'd end up with about 5 errors (1 for the length, 1 for digit, 1 for capital, 1 for special characters, and then 1 for the repeat password because they forgot).

Looking at the code, it seems mostly fine for your purposes; the only thing I'd do is move 8 to a separate constant MIN_PASSWORD_LENGTH.

Improve this answer
\$\endgroup\$
2
\$\begingroup\$

An alternative is to simply use what HTML has built-in:

<input type="password" required minlength="8">

will make that input mandatory and enforce a minimum of eight characters. (You can also use these attributes with type="text".) It's no less secure than doing the validation in JavaScript, as you should still validate it server-side anyway. However, it isn't possible to check using HTML attributes that the two password fields are the same.

The :optional and :required CSS pseudo-classes can be used for styling the input based on the required attribute, but you can also use the more general :valid and :invalid pseudo-classes, which will also respond to things like minlength. You can check these pseudo-classes in JavaScript using Element#matches, but you might have to also check for non-standard naming as ${prefix}MatchesSelector.

The only problem with this approach is the browser compatibility: minlength is not supported except by Chrome and Opera, but you can replace it with the pattern attribute which has wider support, along with the required attribute. Except for Safari and IE <10.

More information about <input> is available at MDN and WebPlatform Docs.

Improve this answer
\$\endgroup\$
1
\$\begingroup\$

In your example here, if I don't put in a name, use a password of < 8 characters, and my two passwords don't match, I will only get alerted to one issue; fix it, get another error, etc. If there are more fields it can get even more bothersome. This can be fixed either as @Pimgd mentioned, as the person enters the information, or if you prefer to do it all at once at the end, you can set a general error variable that you alert after all the checks

var error = ""
var name = document.forms["registrationForm"]["username"].value;
if (name == null || name == "") {
        error += "Name must be filled out \n"
    }
var password = document.forms["registrationForm"]["password"].value;
var repeatPassword = document.forms["registrationForm"]["passwordAgain"].value;
if (password.length < 8) {
    error += "Password should contain 8 symbols or more \n"
    }
if (password != repeatPassword) {
    error += "Filled out passwords should match \n"
    }
if (error != "") {
    alert ("Please correct the following errors \n" + error)
    return false
    }
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.