Unable to produce output from span tag

Question

I am working on a simple form from a coursera MOOC on web development. I am using a RegEx in JS to test for valid input, and an onblur effect to display my test' output. For some odd reason it's not working. Here is the code, I'll explain what it does:




    Week 5 Assignment - Simple Form
    

 
    
        First Name:

         


        Last Name:

         


        Gender:

        Male

        Female


        Date and Year of Birth:

Here, I am creating a simple form and the onblur event is triggered by 2 javascript functions, testFirstName() and testLastName(). I expect to get output on the same line as the textboxes that state that a condition has been or has not been met.

Here is the JavaScript:

function testFirstName() {
    var firstName = document.getElementById('firstname').value;
    var regCheck = /^[a-zA-Z\s\'\-] {2,15} $/;

    if (regCheck.test(firstname)) {
        document.getElementById('firstNamePrompt').style.color = "green";
        document.getElementById('firstnamePrompt').innerHTML = "Name Accepted!";
        return true;
    }

    else {
        document.getElementById('firstNamePrompt').style.color = "red";
        document.getElementById('firstNamePrompt').innerHTML = "Name must be between 2-15 characters!";
        return false;
    }
}

function testLastName() {
    var firstName = document.getElementById('lastname').value;
    var regCheck = /^[a-zA-Z\s\'\-] {2,25} $/;

    if (regCheck.test(firstname)) {
        document.getElementById('lastNamePrompt').style.color = "green";
        document.getElementById('lastnamePrompt').innerHTML = "Name Accepted!";
        return true;
    }

    else {
        document.getElementById('lastNamePrompt').style.color = "red";
        document.getElementById('lastNamePrompt').innerHTML = "Name must be between 2-25 characters!";
        return false;
    }
}

I have a reg. expression that tests that characters can only be A-Z (upper and lowercase), Have a space via the 's', or have an apostrophe or a dash in the name. Those are the only allowed characters based on the regex. I am not sure why I don't see text "Name Accepted!" or "Name must be between x & y characters". Please let me know if there is anything else I need to explain. I hope this is not verbose.

Ivan86 · Accepted Answer

An element needs to have and id in order to be able to target it from javascript with document.getElementById().

After adding an id to firstname and lastname everything works fine.

Also your span ids have upper case letters, which you didn't mention in your javascript.

Here is the corrected code: (run the snippet)

function testFirstName() {
    var firstName = document.getElementById('firstname').value;
    var regCheck = /^[a-zA-Z\s\'\-]{2,25}$/;

    if (regCheck.test(firstName)) {
        document.getElementById('firstNamePrompt').style.color = "green";
        document.getElementById('firstNamePrompt').innerHTML = "Name Accepted!";
        return true;
    }

    else {
        document.getElementById('firstNamePrompt').style.color = "red";
        document.getElementById('firstNamePrompt').innerHTML = "Name must be between 2-15 characters!";
        return false;
    }
}

function testLastName() {
    var lastName = document.getElementById('lastname').value;
    var regCheck = /^[a-zA-Z\s\'\-]{2,25}$/;

    if (regCheck.test(lastName)) {
        document.getElementById('lastNamePrompt').style.color = "green";
        document.getElementById('lastNamePrompt').innerHTML = "Name Accepted!";
        return true;
    }

    else {
        document.getElementById('lastNamePrompt').style.color = "red";
        document.getElementById('lastNamePrompt').innerHTML = "Name must be between 2-25 characters!";
        return false;
    }
}




    Week 5 Assignment - Simple Form
    

 
    
        First Name:

         


        Last Name:

         


        Gender:

        Male

        Female


        Date and Year of Birth:

Unable to produce output from span tag

Answers (2)

Related Questions