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

teresemartyn
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
teresemartyn
Front End Web Development Techdegree Graduate 21,880 Points
Posted by teresemartyn
.a{fill-rule:evenodd;}techdegree seal-36
teresemartyn
Front End Web Development Techdegree Graduate 21,880 Points

Using regular expression in javascript to validate HTML forms

I just cannot figure out why I cannot get my function validateFirstName() to work. I took the nicely designed form that was used in the HTML Form lesson. I just cannot get the regular expression to work. My intention was to experiment with two ways to validate the first and last names. Is there and aspect of the HTML form that is not compatible with my javascript? Thanks, Terese

<script> function validateFirstName () { var fName = document.getElementById("firstName").value;
var rel = /^[a-zA-Z\s\'-] {2,15}$/;

    if(rel.test(fName)) {
    document.getElementById("firstNamePrompt").style.color = "green";
    document.getElementById("firstNamePrompt").innerHTML = "<strong>Valid</strong>";
    return true;
}
    else {
    document.getElementById("firstNamePrompt").style.color = "red";
    document.getElementById("firstNamePrompt").innerHTML = "<strong>Enter valid name</strong>";
    return false;

} } 

    function validateLastName ()
    {
        var lName = lastName.value;

        if (lName.length == 0) { 
            document.getElementById("lastNamePrompt").innerHTML = "<strong>Enter valid last name</strong>";
        }
    } 
    </script>

</head>
<body>

<form action="#">

    <h1>Dog Show Entry</h1>

<fieldset>
    <legend><span class="number">1</span>Exhibitor Information</legend>

    <label for="name">Owner's First Name:</label>
    <input type="text" id="firstName" name="firstName" onblur="validateFirstName();">&nbsp;<span id="firstNamePrompt"></span><br>

    <label for="name">Owner's Last Name:</label>
    <input type="text" id="lastName" name="lastName" onblur="validateLastName();">&nbsp;<span id="lastNamePrompt"></span><br>

    <label for="email">E-mail:</label>
    <input type="email" id="eMail" name="eMail" onblur="validateEmail();">&nbsp;<span id="emailPrompt"></span><br>

    <label for="dogNumber">Dog Registration No.:</label>
    <input type="text" id="dogNumber" name="dog_number" onblur="validateDogNumber();" placeholder="####-#####-##">&nbsp;<span id="dogNumberPrompt"></span><br> 

    <label for="dogTitles">Select Type of Titles Earned:</label>
    <input type="checkbox" name="titles" value="Obed"> Obedience<br>
    <input type="checkbox" name="titles" value="Agility"> Agility <br>
    <input type="checkbox" name="titles" value="Tracking">Tracking<br>

</fieldset>

<fieldset>
    <legend><span class="number">2</span>Dog Show Selection</legend>
<label for "show">Select Show:</label>
<select name="show" id="show">
    <option value="Tulsa">Tulsa Obedience Club - July 1, 2018</option>
    <option value="Dallas">Dallas Obedience Training Club - July 15, 2018</option>
    <option value="Belton">Belton Bell County Club - July 28, 2018</option>
    <option value="Austin">Austin Capital Kennel Club - August 8, 2018</option>
</select> <br>

    <label for="specialNotes">Special Notes:</label>
    <textarea id="notes" name="user_notes"></textarea><br>
</fieldset>

   <button type="submit">Submit Dog Entry</button>

</form>  


</body>

</html>

2 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Your regex might not be doing what you intended:

var rel = /^[a-zA-Z\s\'-] {2,15}$/;

This regex requires a single letter from the character class followed by 2 to 15 spaces. So something like "a     " will match.

I'd guess you don't really want that space between the character class and the quantifier.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

teresemartyn — Glad to help. You can mark the question solved by choosing a "best answer".
And happy coding!