Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marc Drubbel
Marc Drubbel
4,615 Points

Hi guys, I'm working on a Validation Form just for practise. I can't figure out how to check if given info is a nr.

Hi guys, I'm working on a Validation Form just for practise. I can't figure out how to check if given info is a nr. I have tried several combinations which I'd found on google but none of them is working somehow. Variables and functions are still bit confusing me so it's really a challenge for me to fix this. I would appreciate your help! :)

Marc Drubbel
Marc Drubbel
4,615 Points

´´´<!DOCTYPE html> <html> <head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        // Formulier valideren
        function validateForm(frm) {
                if (frm["firstname"].value == "" && frm["lastname"].value == "") {
                    alert("Fields are empty. Please fill in your firstname and lastname.");
                    return false;
            }
                else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
                    alert("You forgot to fill in one of the fields. ");                     
                    return false;
                }
                else {
                    alert("You have filled in the form correctly. Information is sent.");
                    return true;
            }
        }

        function ifNumber(["firstName"], ["lastName"]) {
            if (!isNaN(["firstName", "lastName"])) {
                alert("Firstname and Lastname may not contain numbers. Please check your name and try again.");
                return false;
            } 
            else {
                alert("You have filled in the form correctly. Information is sent.");
                return true;
            }
        }

    </script>

</head>

<body>
    <div class="container">
        <h1>Contact Form</h1>
        <form name="frmNames" onsubmit="return validateForm(this);"> 
            <div class="form-group">
                <label for="firstname">Firstname</label>
                <input type="text" class="form-control" name="firstname" placeholder="Firstname" value="">
            </div>

            <div class="form-group">
                <label for="lastname">Lastname</label>
                <input type="text" class="form-control" name="lastname" placeholder="Lastname" value="">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>

    </div>

</body>

</html>´´´

6 Answers

Devron Baldwin
Devron Baldwin
3,508 Points
Devron Baldwin
Devron Baldwin
3,508 Points

Hi Marc,

The issue is that you're not calling the ifNumber function anywhere in the validateForm function. Try combining the two like so:

<script>
    // Formulier valideren
    function validateForm(frm) {
        if (frm["firstname"].value == "" && frm["lastname"].value == "") {
            alert("Fields are empty. Please fill in your firstname and lastname.");
            return false;
        } else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
            alert("You forgot to fill in one of the fields. ");                     
            return false;
        } else if (!isNaN(frm["firstname"].value) || !isNaN(frm["lastname"].value)) {
            alert("Firstname and Lastname may not contain numbers. Please check your name and try again.");
            return false;
        } else {
            alert("You have filled in the form correctly. Information is sent.");
            return true;
        }
    }
</script>

The validation that this line perfoms:

} else if (!isNaN(frm["firstname"].value) || !isNaN(frm["lastname"].value)) {

Will only check to see if the whole value of each is a number. Someone could write something like abc123 into the field and the form would accept it. You would need to use something like regular expressions (regex) to test to see if any numbers exist in the field.

Something like this will detect any numbers in either field:

<script>
    // Formulier valideren
    function validateForm(frm) {

        if (frm["firstname"].value == "" && frm["lastname"].value == "") {
            alert("Fields are empty. Please fill in your firstname and lastname.");
            return false;
        } else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
            alert("You forgot to fill in one of the fields. ");                     
            return false;
        } else if (frm["firstname"].value.search(/[0-9]/) > -1 || frm["lastname"].value.search(/[0-9]/) > -1) {
            alert("Firstname and Lastname may not contain numbers. Please check your name and try again.");
            return false;
        } else {
            alert("You have filled in the form correctly. Information is sent.");
            return true;
        }
    }
</script>

The search function accepts regular expression and returns a position for the match. In this case we ask it to look for any character between 0 and 9, i.e. any number. See this link for more information about the search function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/search

I hope that helps!

Devron Baldwin
Devron Baldwin
3,508 Points

I should add that if the search function doesn't find a match then it returns -1 which is why we only look for matches greater than -1.

Marc Drubbel
Marc Drubbel
4,615 Points
Marc Drubbel
Marc Drubbel
4,615 Points

Devron Baldwin Thanks for your response! I've tried it and it works :)

But what I am actually trying to do is to use a function instead of else if statements because I want to create a reusable code. For now, the validation form only has Firstname and Lastname. Later on I want it to have an Email, maybe add a field with middle name etc. I just want to built an awesome validation form to practise variables and functions.

Once again thanks for your reaction and your help! :)

Devron Baldwin
Devron Baldwin
3,508 Points
Devron Baldwin
Devron Baldwin
3,508 Points

Marc Drubbel no problem.

You'll want to split it out something like below. Ideally you want the reusable function to just return true or false and then the function handling the alerts can handle the interaction with the site user.

<script>
    // Formulier valideren
    function validateForm(frm) {

        if (frm["firstname"].value == "" && frm["lastname"].value == "") {
            alert("Fields are empty. Please fill in your firstname and lastname.");
            return false;
        } else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
            alert("You forgot to fill in one of the fields. ");                     
            return false;
        } else if (containsNumber(frm["firstname"].value) || containsNumber(frm["lastname"].value)) {
            alert("Firstname and Lastname may not contain numbers. Please check your name and try again.");
            return false;
        } else {
            alert("You have filled in the form correctly. Information is sent.");
            return true;
        }
    }

    function containsNumber(validateThis) {
        // exit if the variable doesn't exist
        if(typeof validateThis === 'undefined') { return false; } // if it doesn't exist then it doesn't contain a number!

        // check to see if the variable contains a number
        if(validateThis.search(/[0-9]/) > -1) {
            return true; // yes it contains a number
        } else {
            return false; // no number found
        }
    }

</script>

I've added some comments to help you out.

Marc Drubbel
Marc Drubbel
4,615 Points
Marc Drubbel
Marc Drubbel
4,615 Points

Devron Baldwin I've been working on the code and this is what I have made of it. It isn´t done yet. I have to fine tune it but it is working.

Thanks for your help!

´´´<!DOCTYPE html> <html> <head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        // Formulier valideren
        function validateForm(frm) {

            var firstName = frm["firstname"].value;
                var lastName = frm["lastname"].value;

                function ifNumber(sName) { 
                 alert("Firstname and Lastname may not contain numbers. Check your name and please try again");
                 return isNaN(sName);
                }

                ifNumber(firstName);
                ifNumber(lastName);

                if (frm["firstname"].value == "" && frm["lastname"].value == "") {
                    alert("Fields are empty. Please fill in your firstname and lastname.");
                    return false;
            }
                else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
                    alert("You forgot to fill in one of the fields. ");                     
                    return false;
                }
                else {
                    alert("You have filled in the form correctly. Information is sent.");
                    return true;
            }

        }



    </script>

</head>

<body>
    <div class="container">
        <h1>Contact Form</h1>
        <form name="frmNames" onsubmit="return validateForm(this);"> 
            <div class="form-group">
                <label for="firstname">Firstname</label>
                <input type="text" class="form-control" name="firstname" placeholder="Firstname" value="">
            </div>

            <div class="form-group">
                <label for="lastname">Lastname</label>
                <input type="text" class="form-control" name="lastname" placeholder="Lastname" value="">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>

    </div>

</body>

</html> ´´´

Devron Baldwin
Devron Baldwin
3,508 Points

Keep going. I can see you're heading in the right direction. Practice makes perfect.

The way you're using ifNumber at the moment will return the true/false value within the ifNumber function but you're not returning true/false within the validateForm function.

You need to do something like this (untested, sorry)

    <script>
        // Formulier valideren
        function validateForm(frm) {

            var firstName = frm["firstname"].value;
                var lastName = frm["lastname"].value;

                function ifNumber(sName) { 
                     return isNaN(sName); // only validate the value here (it makes the function more flexible)
                }

                if(ifNumber(firstName) || ifNumber(lastName)) {
                    // output the message here rather than in ifNumber
                    alert("Firstname and Lastname may not contain numbers. Check your name and please try again");
                    return false;
                }

                if (frm["firstname"].value == "" && frm["lastname"].value == "") {
                    alert("Fields are empty. Please fill in your firstname and lastname.");
                    return false;
            }
                else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
                    alert("You forgot to fill in one of the fields. ");                     
                    return false;
                }
                else {
                    alert("You have filled in the form correctly. Information is sent.");
                    return true;
            }

        }



    </script>

If you don't return true/false within the validateForm function then the function will just continue onto this line.

 if (frm["firstname"].value == "" && frm["lastname"].value == "") {
Marc Drubbel
Marc Drubbel
4,615 Points
Marc Drubbel
Marc Drubbel
4,615 Points

Devron Baldwin It makes sense to me but somehow it is not working. I have tried to change the 2nd 'if' to 'else if' but it didn't work :S

Devron Baldwin
Devron Baldwin
3,508 Points

Try looking at the console on your web browser. You should be able to access it by right clicking the web page then selecting 'Inspect element'. The panel that appears should let you select 'console'. If you then refresh the page it should give you an error.

Feel free to paste the full html code in again and I might get chance to take a look if you're quick today.

Marc Drubbel
Marc Drubbel
4,615 Points
Marc Drubbel
Marc Drubbel
4,615 Points

When fill in numbers it shows a pop saying "you filled in the form correctly. Information sent."

´´´<!DOCTYPE html> <html> <head>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        // Formulier valideren
    function validateForm(frm) {

            var firstName = frm["firstname"].value;
            var lastName = frm["lastname"].value;

            function ifNumber(sName) { 
                 return isNaN(sName); // only validate the value here (it makes the function more flexible)
            }

            if(ifNumber(firstName) || ifNumber(lastName)) {
                // output the message here rather than in ifNumber
                alert("Firstname and Lastname may not contain numbers. Check your name and please try again");
                return false;
            }
                if (frm["firstname"].value == "" && frm["lastname"].value == "") {
                    alert("Fields are empty. Please fill in your firstname and lastname.");
                    return false;
            }
                else if (frm["firstname"].value == "" || frm["lastname"].value == "") {
                    alert("You forgot to fill in one of the fields. ");                     
                    return false;
                }
                else {
                    alert("You have filled in the form correctly. Information is sent.");
                    return true;
            }

        }



    </script>

</head>

<body>
    <div class="container">
        <h1>Contact Form</h1>
        <form name="frmNames" onsubmit="return validateForm(this);"> 
            <div class="form-group">
                <label for="firstname">Firstname</label>
                <input type="text" class="form-control" name="firstname" placeholder="Firstname" value="">
            </div>

            <div class="form-group">
                <label for="lastname">Lastname</label>
                <input type="text" class="form-control" name="lastname" placeholder="Lastname" value="">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>

    </div>

</body>

</html>´´´

Devron Baldwin
Devron Baldwin
3,508 Points

Hi Marc Drubbel

The problem with the code here is that the function:

            function ifNumber(sName) { 
                 return isNaN(sName); // only validate the value here (it makes the function more flexible)
            }

Will return true if the field is not a number but false if it is a number. Therefore the IF statement below will pass if either field isn't a number. (the complete opposite of what you are trying to achieve!)

            if(ifNumber(firstName) || ifNumber(lastName)) {
                // output the message here rather than in ifNumber
                alert("Firstname and Lastname may not contain numbers. Check your name and please try again");
                return false;
            }

The fix is to change the function to the below code:

            function ifNumber(sName) { 
                 return !isNaN(sName); // only validate the value here (it makes the function more flexible)
            }

The exclamation point here is used to reverse the answer from the isNaN function.

You still aren't testing to see if either value contains a number but you are testing to see if either value is entirely numerical.

Please accept my apologies for not testing the code. There's another lesson... always test your code!