Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 50 additions & 4 deletions validator.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,53 @@
// jQuery elements
var $email = $('form input[type=text]');
var $password = $('form input[type=password]');
var $submit = $('form input[type=submit]');
var $errors = $('.errors li');

//insert your code here

$(function(){
// Form validators, matching to each of the four errors in order
var validators = [
// Please enter a valid email address
function () {
return /^.+@.+\..+$/.test($email.val());
},

//insert your code here
// Your password should be at least 8 characters long
function () {
return $password.val().length >= 8;
},

// Your password should contain at least one capital letter
function () {
return /[A-Z]/.test($password.val());
},

// Your password should contain at least one number (0-9)
function () {
return /\d/.test($password.val());
}
];

// Hides all validation errors
function hideErrors() {
$errors.hide();
$submit.prop('disabled', false);
}

// Runs all validators and display any errors that occur
function validate() {
hideErrors();
validators.forEach(function (validator, index) {
if (!validator()) {
$errors.eq(index).show();
$submit.prop('disabled', true);
}
});
}

// Run validators initially and whenever an input is updated
$(function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nicolasmccurdy looks good. does your validator prevent form submission?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, it doesn't. I'll fix that soon.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just realized that since the form method is #, this page shouldn't be making any actual network requests when you submit the form anyway. So if I'm understanding this correctly, the form already can't be submitted. Though I guess I could disable the button or do something similar.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just pushed a commit that disables the button whenever anything is invalid.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good stuff. The default behavior of form will attempt to post to the # action whatever it might be. Usually, you'll see use of .preventDefault here to prevent submission. The big concern here of course is reducing the number of calls to the server.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah right, I forgot that you need to use that method for prevent form submission. Should I try that out, or is disabling the button good enough?

hideErrors();
validate();
$email.on('keyup', validate);
$password.on('keyup', validate);
});