Javascript cannot submit form with empty field validation

Question

I have a small issue with my code not submitting my form. Once I fill out the form and press the submit button, nothing simply happens, it seems like the form is not being submitted. In practice, this code should check whether there are any empty fields and if so, it prompts a message instructing to fill out the fields. If every field filled out, submit the form.

            function storeUser() {
            var userObject = {};

            userObject.username = document.getElementById("username").value;
            userObject.email = document.getElementById("inputEmail").value;
            userObject.password = document.getElementById("inputPassword").value;
            userObject.passwordConfirm = document.getElementById("inputPasswordConfirm").value;
            userObject.mobileNumber = document.getElementById("inputNumber").value;
            userObject.score = 0;

            if (userObject.password !== userObject.passwordConfirm) {
                document.getElementById("Warning").innerHTML = "Your password doesn't match.";  
                return false;
            }

            if (userObject.username === "") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.email === " " ) {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.password === " ") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.passwordConfirm === " ") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
            } 
            if (userObject.mobileNumber === " ") {
                document.getElementById("Warning").innerHTML = "";
                document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
                return false;
            }
            else {
                return true;
            }

            localStorage[userObject.email] = JSON.stringify(userObject);

            document.getElementById("Result").innerHTML = "Success! You have registered your account.";

As you most probably noticed, I'm a complete novice to this. Aynone could lead me the right way?

EDIT:

                    
                    Please fill out all fields to register your account

Luke Woodward · Accepted Answer

Looking at your code I found a number of problems:

Invalid telephone number regexp: you are using the following regexp to validate the telephone number field, but it has a missing character:
```
^\s*$?(020[7,8]{1}$?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$
//               missing ] after 0-9 ^^
```
(I am going to ignore the fact that the regular expression has placeholder 'Mobile number' yet only accepts landline phone numbers for inner and outer London in the UK.)
You are showing validation error messages if the email, password, confirm-password and telephone number fields contain a single space:
```
 if (userObject.email === " " ) {
```
You probably want to be comparing the values against an empty string instead:
```
 if (userObject.email === "" ) {
```

The end of your storeUser() function is as follows:

    if (userObject.mobileNumber === " ") {
        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
        return false;
    }
    else {
        return true;
    }

    localStorage[userObject.email] = JSON.stringify(userObject);

    document.getElementById("Result").innerHTML = "Success! You have registered your account.";

When do we reach the last two lines, the one that writes to local storage and the one that shows the success message?

If the telephone number field contains a single space, then a warning message appears and the function returns false.
If the telephone number field contains anything other than a single space, the function returns true.

The last two lines are unreachable. They are never executed because the function returns before it gets to them.

What you probably want to do is to get rid of the else clause and add return true; at the bottom, i.e.:

    if (userObject.mobileNumber === " ") {
        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
        return false;
    }

    localStorage[userObject.email] = JSON.stringify(userObject);

    document.getElementById("Result").innerHTML = "Success! You have registered your account.";
    return true;

Inconsistent use of return false;. If the passwords don't match, or the telephone number field isn't filled out, the function returns false. There is no corresponding return false; line for the username, email, password and confirm-password fields. Add this line for each of these fields.
You aren't clearing the warning message if the form is successfully completed. Add the line
```
document.getElementById("Warning").innerHTML = "";
```
to the end of your function.

Incidentally you have various pairs of lines
```
        document.getElementById("Warning").innerHTML = "";
        document.getElementById("Warning").innerHTML = "Please fill out the form fully!";
```
but the first line in each pair is unnecessary because the empty-string value you assign to the inner HTML of the warning element is immediately replaced by the warning message assigned in the second line. You can delete the first line of each such pair.

Javascript cannot submit form with empty field validation

Answers (2)

Related Questions