I have a form that has five fields; first name, last name, username, password and passwordConfirmation.
I'd firstly like to say that I don't want the most complicated method, this is for a very simple website that will never go live, it is purely for demonstration purposes and I am not to worry about error catching in the sense of harmful user input.
So far I have this:
function validateRegistrationForm(firstName, lastName, username, password, passwordConfirmation) {
alert("validate form function has been called");
//alert("function has been called");
//---
var firstName = firstName;
//alert(firstName);
var lastName = lastName;
//alert(lastName);
var username = username;
//alert(username);
var password = password;
//alert(password);
var passwordConfirmation = passwordConfirmation;
//alert(passwordConfirmation);
//---
//**The code that I have sectioned off here, I am unsure whether I need it or not, could someone please explain to me why I would do this, and not just reference the parameters in the function directly?**
// Check here if all the fields in the registeration form have been filled.
if ( firstname == null || firstname == "" ) {
//firstname hasn't been filled out
}
if ( lastName == null || lastName == "" ) {
//lastname hasn't been filled out
}
if ( username == null || username == "" ) {
//username hasn't been filled out
}
if ( password == null || password == "" ) {
//password hasn't been filled out
}
if ( passwordConfirmation == null || passwordConfirmation == "" ) {
//passwordconfirmation hasn't been filled out
}
}
I would like to have a way to check if each of the fields have been filled out (which I have here I think) and if not, to produce a notification such as a red border around the input element in question and/or a message with instructions on how to resolve the issue. I know this can be done with css but I am not sure of the most efficient way to do it.
Currently I have created these two functions:
function generateError(messageText, elementIdentifier) {
alert("error generator called");
//var element = document.getElementById(elementID);
//var error = document.createTextNode(message);
//element.innerHTML = message;
alert("Element: " + elementIdentifier + ", Reason: " + messageText);
}
function validatePassword(password, passwordConfirmation) {
alert("password check called");
if (password == passwordConfirmation) {
if (password.length < 8) {
//password too short
//alert("password\'s match but they are too short");
return false;
} else {
//passwords match and the right length
//alert("password\'s match and they are 8 characters or longer");
return true;
}
} else {
//the two do not match
//alert("they don\'t match")
generateError("Passwords don\'t match", "password");
return false;
}
}
The validatePassword() function takes the password and the password confirmation as two parameters, I think this works already, what I want is for the errors generated to be passed to the generateError() function which stores them all in an array and then loops through them one by one displaying to the user what is wrong.
