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

Amit Bijlani
STAFF
Amit Bijlani
Treehouse Guest Teacher
Posted by Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher

Weekly Contest: Javascript Validation

Wassup!

Thought we would mix it up this week and offer a challenge to the developers. This weeks contest will test your javascript foo.

Here's the low down:

  1. Create a form containing First Name, Last Name, Email, Credit Card Number and Phone number

  2. Create a JavaScript validation library that would validate the information entered.

  3. You cannot use jQuery or any third party library to help you out. The code must be written only in JavaScript.

  4. Some rules to consider:

  • Email: a gmail address can contain plus (+) signs or periods in the email: developer@gmail.com or developer+fans@gmail.com or de.veloper@gmail.com

  • Credit card: validate the credit card number. Validation must also take into account that some people might enter hyphens.

  • Phone number: must accept various formats: (000) 000-0000 or 000-000-0000 or 0000000000.

Bonus points! inline validation and not just alert boxes.

Remember this is a developer challenge and not a design challenge. You will not be judged on how pretty or ugly your form looks.

Answer this post with a CodePen link to your entry. The deadline for entries is Wednesday, June 26th at 11:59pm ET. Sorry, no replies submitted after that will be eligible. The reply with the most upvotes wins! The winner will be announced on Thursday, June 27th. The prize for this contest will be a special badge plus bragging rights. :)

Update Looks like Arijit Bhattacharya wins with 3 votes! Great job everyone! Congratulations Arijit!

6 Answers

Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points
Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points

I did a very simple check for the credit-card validation because strict validation would have added a lot more code.

Here it is

Update

I worked a bit more to improve the aesthetics and have a clean implementation of the code.

Also, I have listed the details of the module interface in the info of the pen.

Matthew Ong
Matthew Ong
6,041 Points
Matthew Ong
Matthew Ong
6,041 Points

Nice form! Your credit card field accepts letters thats the only thing I saw wrong.

Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points
Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points

Thanks, Matthew for checking out. Surprisingly it works alright on my browser. Still, I checked my regular expression, it shouldn't be accepting any letter.

Matthew Ong
Matthew Ong
6,041 Points
Matthew Ong
Matthew Ong
6,041 Points

For me its letting letters at only the end or the beginning of it

Matthew Ong
Matthew Ong
6,041 Points
Matthew Ong
Matthew Ong
6,041 Points

For example d34567898765432g works but 234gg78987654322 does not

Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points
Arijit Bhattacharya
Arijit Bhattacharya
4,563 Points

I guess I fixed with it. Thanks a lot, Matthew.

Felipe Marcos
Felipe Marcos
6,274 Points
Felipe Marcos
Felipe Marcos
6,274 Points

5 hours on this, I'm totally dead.

Here it is: http://codepen.io/FelipeMarcos/pen/JcuKI

Tomasz Foster
Tomasz Foster
19,442 Points
Tomasz Foster
Tomasz Foster
19,442 Points

Ok, here is what I came up with. working example

I didn't spend too much time making it pretty, but I use inline validation with the onblur() function to change the background to either light green or light red.

I expanded a little further with the credit card number validation by using a modulus 10 check, which is an easy way to test for the Luhn Algorithm for credit cards. I only have the function remove dashes and spaces, if they enter a letter or another character it will still display as invalid.

For the names, I allowed the use of spaces, hyphens, and apostrophe's, because O'Doyle rules! There are also hyphenated names and people that have 3 or 4+ names in their full name, we don't want to leave them out. I was tempted to allow periods to satisfy the J.T.'s of the world, but I decided not to.

I think that covers everything. If you guys see any errors, please, please let me know, I would appreciate any feedback I can get, thanks!

edit: here is the code if anyone wants to see what I did the code

Matthew Ong
Matthew Ong
6,041 Points
Matthew Ong
Matthew Ong
6,041 Points

Glad that there's a contest for developers! I'm really new to javascript but I'll give it a try :) I finally have a use for those credit card check digits I learned in math!

Felipe Marcos
Felipe Marcos
6,274 Points
Felipe Marcos
Felipe Marcos
6,274 Points

After 3 hours I'm starting to have a headache, that's a good challenge to improve my skills and now I'm stuck. I'll take a rest x.x

Brian Polonia
Brian Polonia
25,139 Points
Brian Polonia
Brian Polonia
25,139 Points

Hello, I ran a search in the forum on "regular expressions" for javascript and saw this thread come up. I am looking for which track I can take to learn how to do Javascript validation using regular expressions. Can someone please point me in the right direction? Thanks!

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher
Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

There's no where on a track at the moment - however there's this