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
Abe Layee
8,378 PointsForm Validation.
I am trying to create a basic form validation for my portfolio. For some reason, my validation is not working or telling the user to fill in the fill required. What am I doing wrong here? Here is the code pen link http://codepen.io/Layee/pen/jPZpva
<form action="#index.php" method="post">
<input type="text" name="user_name" placeholder="Your Name" id="user_name"/ >
<input type="email" name="user_email" placeholder="Email Address" id="user_email"/>
<textarea name="user_comment" placeholder="Type your Message"></textarea>
<input type="submit" value="Send Message" />
</form>
my JavaScript code here
function checkForm () {
var user_name = document.getElementById('user_name').value;
var user_email = document.getElementById('user_email').value;
if (user_email ==="" || user_name ==="") {
textContent = "Please fill this section out";
return false;
}
else {
textContent = "";
return true;
}
}
checkForm();
2 Answers
Justin Horner
Treehouse Guest TeacherHello Abraham,
In order to validate the form and prevent it from submitting to the server, you'll need to use the onsubmit event of the form and return the value from your checkForm function.
I've made some simple modifications to your Pen here.
I hope this helps.
Abe Layee
8,378 Pointsaww, thank you. You learn something new everydayt:D I have a quesiton. I heard is bad practice adding event listener inside the html which is why I didn't use it.
Justin Horner
Treehouse Guest TeacherYou're welcome! If you prefer, simply attach the event when the window loads and you'll avoid using the event in HTML. I've updated the Pen here to demonstrate.