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
amirbizimana
9,639 PointsJavaScript codepen
http://codepen.io/iambizi/pen/ZKJdQO Im trying to write a script that displays an error message if you click the submit button when the form is empty, However it also seems to be displaying the error message even if you type content in the input. I can't seem to figure out why? Any feedback is greatly appreciated.
2 Answers
andren
28,558 PointsAfter playing around with the code a bit I identified two issues:
Firstly in this line:
var $input = $(".input");
You set $input to an element with a class called input but there is no such class. I assume you might have meant to set it to the element with the input tag instead, in that case you should not use . in the selector. Like this:
var $input = $("input");
Though that is only a stop-gap measure that works because there is only one input element on the webpage. If you want to add validation to other inputs in the future you have to actually add classes or id's to them and then use that to select them.
The second issues are these lines:
var $inputVal = $input.val();
var $falseInput = !$input.val();
Variables are not updated dynamically when the thing you set them to changes. They are assigned the value the function returns and then they just keep that value. Since you assign these variables at the top of your code they are assigned a value once the page loads and then just keep that value. Meaning that they are not updated when something is written into the input. These two lines should be placed within the click listener of the submit button, that way their value will always reflect the current state of the $input variable.
Here is the revised code I ended up writing:
var $errorMssg = $("#error-mssg");
var $input = $("input"); // Removed the . since "input" is not a class
$(".submit").click(function errorDisplay(e) { // Added event parameter since I don't want the page to refresh
var $inputVal = $input.val(); // Moved these two lines down here
var $falseInput = !$input.val(); // So they are run each time they are referenced
if ($falseInput) {
$errorMssg.show();
e.preventDefault(); // I added this to prevent the page from reloading when the submit event was sent
} else if (!$falseInput) {
$errorMssg.hide();
e.preventDefault();
} else{
return true;
}
});
I added the e.preventDefault(); mostly to make debugging easier on myself, but It's probably a good idea to keep in your code while you are experimenting around with the submit event handler.
If you have any additional questions, or found part of my explanation unclear then feel free to ask followup questions, I'll be happy to answer any question I can.
amirbizimana
9,639 PointsThanks you so much andren ! Yeah I didn't catch the fact I had omitted to add an Id for that input tag. Your explanation about the $input variable state makes a lot of sense. Also thanks for that bonus with the .preventDefault() method it was indeed difficult to experiment while the page kept reloading. Thanks Again !