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

Nancy Melucci
PLUS
Nancy Melucci
Courses Plus Student 36,659 Points
Posted by Nancy Melucci
Nancy Melucci
Courses Plus Student 36,659 Points

Make validation error message show when textbox loses focus

OK, so, I've pretty much tried everything here. blur(), focus() etc. The form is supposed to trigger error messages during the user input process if the user leaves an area blank. Then if everything is valid, when the submit button is clicked, a hidden div appears. I TOTALLY have the hidden div thing down, but I am not going to get much credit - or learn much - if I can't make the validation error messages appear if the user leaves a required input area blank. I am posting a sample with the code for one textbox. What do I need to tweak here? Thanks. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Assignment 6</title>
    <link rel="stylesheet" href="Assignment_6.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(document).ready(function(){   
        var first_name = $("#first_name").val();
        $("#first_name").blur() = function() {
        if (first_name = "")  { 
        // show the error
        $('#first_error').text("Please enter your last name.");
        $("#first_error").add("error");
        // ...and put the focus back
        $("#first_name").focus();
        } else {
      $("#first_name").remove("error");
        }
            }
          });

window.onload = function() {
    $("#first_name").focus();
};

    </script>
</head>

<body>
    <div id="top">
    <h1>Assignment 6</h1>
    <h3>Enter Employment Statistics</h3>
    <form id="myform">
        <br>
        <label for="first_name">First Name:</label>
        <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>
        <br>
        <label for="last_name">Last Name:</label>
        <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>
        <br>
        <fieldset id="gender">
        Male <input type="radio" name="gender" value="Male">
        Female <input type="radio" name="gender" value="Female"> 
        Other <input type="radio" name="gender" value="Other"> <span class="error" id="gender_error"></span>
        </fieldset>
        <br>
        Years Experience:
        <select id="years" name="years" size="1">
            <option value="-">-</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
        </select>

        <span class="error" id="years_error"></span>

        <br><br>
        <input type="button" id="mysubmit" value="Submit Form">
        <br>
    </form>
    <br>
    <br>
    </div>

    <div id="message">

    </div>
</body>
</html>

/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
    display: block;
}

* {
    margin: 10;
    padding: 10;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 650px;
    background-color: silver;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 120%;
    padding: .25em 0 .25em 25px;
}

p {
    padding-bottom: .25em;
    padding-left: 25px;
}

.error {
    color: red;

} 

#message {
    background-color: yellow;
    font-size: 1.5em;
    padding:  40px;
    width: 400px;
    display:none;


}

1 Answer

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I see two issues at first glance:

        $("#first_name").blur() = function() {  // you can't assign a handler
        $("#first_name").blur(function() {      // but you pass it as an argument

        if (first_name = "")  {   // one "=" is an assignment
        if (first_name == "")  {  // use two for a comparison

You can probably fix the rest from there.

Nancy Melucci
Nancy Melucci
Courses Plus Student 36,659 Points
Nancy Melucci
Nancy Melucci
Courses Plus Student 36,659 Points

Yes, I completely know the second thing (assignment versus logical comparison) but tend to be more distracted by other things when working with JS/JQuery.

Thanks for helping