Javascript Form Validation - missing something?

Question

I have been looking for a reason why my form validation is not working for the past 3 hours and can't seem to find the answer.

I have the external script file in the HTML, form id, onclick event. What am I missing? Can anyone help please?

HTML



  
    Individual/Company Details
    

    Fields with an asterisk (*) are required
    

    

    First Name *: 
    

    
    

    Last Name *: 
    

    
    

    Username *: (alpha-numeric characters only) 
    

    
    

    Password *: (8 characters with 2 characters being numbers) 
    

    
    

    Date of Birth: (dd/mm/yyyy) 
    

    
    

    Gender: 
    

    

    Male
    Female
    Other
    

    

    E-mail *: 
    

    
    

    Address *: (alpha-numeric characters only)
    

    
    

  
  
    Membership
    

    Membership Type *:

registration.js

// JavaScript Document

// Conditions are checked upon submission of form and error messages are displayed
function validateForm() {
  var error_message = "";

  // Different functions for validation of different input
  error_message += validateFirstName();

  error_message += validateLastName();

  error_message += validateUserName();

  error_message += validatePassword();

  error_message += validateDoB();

  error_message += validateGender();

  error_message += validateEmail();

  error_message += validateAddress();

  error_message += validateMembership();

  error_message += validateDuration();

  if (error_message != "") {
    alert("Some fields have invalid entry:
" + error_message);
    return false;
  }

  return true;
}

// Validation of First Name
function validateFirstName() {
  var error = "";
  var nonletters = /[^a-zA-Z]+/;

  if (document.forms["registration"]["firstname"].value.length == 0) // condition is checked if field is left blank
  {
    registration.firstname.focus();
    error = "First name is required 
"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["firstname"].value.match(nonletters)) // condition is checked if field is alphabetical characters only
  {
    registration.firstname.focus();
    registration.firstname.select();
    error = "Alphabetical characters only for first name 
"; // error message is displayed if field is not alphabetical characters only
  }

  return error;
}

// Validation of Last Name
function validateLastName() {
  var error = "";
  var nonletters = /[^a-zA-Z]+/;

  if (document.forms["registration"]["lastname"].value.length == 0) // condition is checked if field is left blank
  {
    registration.lastname.focus();
    error = "Last name is required 
"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["lastname"].value.match(nonletters)) // condition is checked if field is alphabetical characters only
  {
    registration.lastname.focus();
    registration.lastname.select();
    error = "Alphabetical characters only for last name 
"; // error message is displayed if field is not alphabetical characters only
  }

  return error;
}

// Validation of User Name
function validateUserName() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;

  if (document.forms["registration"]["username"].value.length == 0) // condition is checked if field is left blank
  {
    registration.username.focus();
    error = "User name is required 
"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["username"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.username.focus();
    registration.username.select();
    error = "Alpha-numeric characters only for user name 
"; // error message is displayed if field is not alpha-numeric characters only
  }

  return error;
}

// Validation of Password
function validatePassword() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;
  var numbers = /(?=(.*\d){2})/;

  if (document.forms["registration"]["password"].value.length == 0) // condition is checked if field is left blank
  {
    registration.password.focus();
    error = "Password is required 
"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["password"].value.length != 8) // condition is checked if password is not eight characters
  {
    registration.password.focus();
    registration.password.select();
    error = "Password of 8 characters is required 
"; // error message is displayed if password is not eight characters
  } else if (document.forms["registration"]["password"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.password.focus();
    registration.password.select();
    error = "Alpha-numeric characters only for password 
"; // error message is displayed if field is not alpha-numeric characters only
  } else if (!(document.forms["registration"]["password"].value.match(numbers))) // condition is checked if field has at least two numbers
  {
    registration.password.focus();
    registration.password.select();
    error = "Password must contain at least 2 numbers 
"; // error message is displayed if field does not have at least two numbers
  }

  return error;
}

// Validation of Date of Birth
function validateDoB() {
  var error = "";
  var dob = document.forms["registration"]["dob"].value;
  var validdob = /\d{2}/\d{2}/\d{4}/;

  if (dob.length == 0) // condition is checked if field is left blank
  {
    error = ""; // no error message is displayed if field is blank
  } else if (!(dob.match(validdob))) // condition is checked if field is in correct format
  {
    registration.dob.focus();
    registration.dob.select();
    error = "Please enter date of birth in valid format 
"; // error message is displayed if field is in incorrect format
  }

  return error;
}

// Validation of Gender
function validateGender() {
  var error = "";

  if (document.forms["registration"]["gender"].value.unchecked) // condition is checked if field is left blank
  {
    error = ""; // no error message is displayed if field is blank
  }

  return error;
}


// Validation of Email Address and format validity
function validateEmail() {
  var error = "";
  var email = document.forms["registration"]["email"].value;
  var emailformat = /\w+([\.-]?\w{1})*@\w{1}([\.-]?\w+)*(\.\w{1})+/

  if (email.length == 0) // condition is checked if field is left blank
  {
    registration.email.focus();
    error = "Email address is required 
"; // error message is displayed if field is blank
  } else if (!(email.match(emailformat))) // condition is checked if field is in correct format
  {
    registration.email.focus();
    registration.email.select();
    error = "Please enter a valid email address 
"; // error message is displayed if invalid email address entered
  }

  return error;
}

// Validation of Address
function validateAddress() {
  var error = "";
  var nonalphanum = /[^0-9a-zA-Z]+/;

  if (document.forms["registration"]["address"].value.length == 0) // condition is checked if field is left blank
  {
    registration.address.focus();
    error = "An address is required 
"; // error message is displayed if field is blank
  } else if (document.forms["registration"]["address"].value.match(nonalphanum)) // condition is checked if field is alpha-numeric characters only
  {
    registration.address.focus();
    registration.address.select();
    error = "Alpha-numeric characters only for address 
"; // error message is displayed if field is not alpha-numeric characters only
  }

  return error;
}

// Validation of Membership Type
function validateMembership() {
  var error = "";

  if (document.forms["registration"]["membership"].value == "default") // condition is checked if field is left as default
  {
    registration.membership.focus();
    error = "Membership type must be selected 
"; // error message is displayed if field is not selected
  }

  return error;
}

// Validation of Membership Duration
function validateDuration() {
  var error = "";

  if (document.forms["registration"]["duration"].value == "default") // condition is checked if field is left as default
  {
    registration.duration.focus();
    error = "Membership duration must be selected 
"; // error message is displayed if field is not selected
  }

  return error;
}

slevy1 · Accepted Answer

While it's ever so much easier to create a form and validate with HTML5 (see this article), the code now works; console.log() is a nice debugging tool. I commented out invoking "validateDuration()" since there is no corresponding HTML form field for membership duration.

What helps to ensure submitting a valid form is coding in the form element onsubmit="return validateForm()" so that if the form fails to validate the function's return value is false which then gets returned in turn, thereby preventing the form from being submitted.

When it comes to form validation, you can either stop the action and focus on the invalid field and display an error message or you can display a laundry list of all the errors. I think it's more user-friendly to do the former, so I changed the code accordingly.

// registration.js contents: 
var d = document;
d.f   = d.forms;
d.g   = d.getElementById;

var error_message = "";

function doErrorMsg(obj,em){
  obj.innerHTML="Invalid, as follows:

" + em;
  obj.style.visibility="visible";
}



function validateForm(){
  if (error_message = validateFirstName()) {
       doErrorMsg( d.g("errormsg"),error_message);
       return false;
  }
  else 
  if (error_message = validateLastName()) {
       doErrorMsg( d.g("errormsg"),error_message);
       return false;
  }
  else
  if (error_message = validateUserName()) {
       doErrorMsg( d.g("errormsg"),error_message);
       return false;
  }
  else
  if (error_message = validatePassword()) {
       doErrorMsg( d.g("errormsg"),error_message);
       return false;
  }
  else
  if (error_message = validateDoB()) {
       doErrorMsg( d.g("errormsg"),error_message);
       return false;
  }
  else
  if (error_message = validateGender()) {
      doErrorMsg( d.g("errormsg"),error_message);
      return false;
  }
  else
  if (error_message = validateEmail()) {
      doErrorMsg( d.g("errormsg"),error_message);
      return false;
  }
  else
  if (error_message = validateAddress()) {
       doErrorMsg( d.g("errormsg"),error_message);
       return false;
  }
  else
  if (error_message = validateMembership()) {
         doErrorMsg( d.g("errormsg"),error_message);
         return false;
  }
  //error_message += validateDuration();

  if (error_message == ""){
    return true;
  }

}// end validateForm



// Validate First Name
function validateFirstName() {
  var nonletters = /[^a-zA-Z]+/;
  var fname = d.f["registration"]["firstname"];
  
  if ( fname.value.length == 0 ) {
    fname.focus();
    fname.select();
    return("First name is required

");
  }
  else
  if (fname.value.match(nonletters)) {
    fname.focus();
    fname.select();
    return("Alphabetical characters only for first name 
"); 
  }
  return(""); // no error
}// end validateFirstName

// Validate Last Name
function validateLastName(){
  var nonletters = /[^a-zA-Z]+/;
  var lname = d.f["registration"]["lastname"];
  if (lname.value.length == 0) {
    lname.focus();
    lname.select();
    return("Last name is required

");
  }
  else 
  if (lname.value.match(nonletters)) {
    lname.focus();
    lname.select();
    return("Alphabetical characters only for last name

"); 
  }
  return(""); // no error
}// end validate last name


// Validation of User Name
function validateUserName(){
  var nonalphanum = /[^0-9a-zA-Z]+/;
  var uname = d.f["registration"]["username"];
  if (uname.value.length == 0) {
    uname.focus();
    uname.select();
    return("User name is required

"); 
  }
  else 
  if (uname.value.match(nonalphanum)) {
    uname.focus();
    uname.select();
    return("Alpha-numeric characters only for user name

"); 
  }
  return(""); // no error
}// end validate user name


// Validate Password
function validatePassword(){
  var nonalphanum = /[^0-9a-zA-Z]+/;
  var numbers = /(?=(.*\d){2})/;
  var pword = d.f["registration"]["password"];

  if (pword.value.length == 0) {
    pword.focus();
    pword.select();
    return("Password is required

"); 
  }
  else
  if (pword.value.length != 8) {
    pword.focus();
    pword.select();
    return("Password of 8 characters is required 

"); 
   }
   else
   if ( pword.value.match(nonalphanum) ) {
    pword.focus();
    pword.select();
    return("Alpha-numeric characters only for password

"); 
    }
    else 
    if ( !pword.value.match( numbers ) ) {
      pword.focus();
      pword.select();
      return("Password must contain at least 2 numbers

"); 
    }
    return(""); // no error
}// end validate password


// Validate DoB
function validateDoB(){
  var dob = d.f["registration"]["dob"];
  var validdob = /\d{2}/\d{2}/\d{4}/;

  if (dob.value.length == 0) {
    return(""); // no error if blank field
  }
  else
  if ( !( dob.value.match( validdob ) ) ) {
    dob.focus();
    dob.select();
    return("Please enter date of birth in valid format

");
   }
   return(""); // no error
}// end validate DoB

// Validate Gender
function validateGender(){
  var gender = d.f["registration"]["gender"];
  if (gender.value.unchecked) {
     // no error if blank field
  }
  return(""); // no error
}


// Validate Email 
function validateEmail() {
  var email = d.f["registration"]["email"];
  var emailformat = /\w+([\.-]?\w{1})*@\w{1}([\.-]?\w+)*(\.\w{1})+/

  if (email.value.length == 0) {
    email.focus();
    email.select();
    return("Email address is required

"); 
  }
  else 
  if ( !( email.value.match( emailformat ) ) ){
    email.focus();
    email.select();
    return("Please enter a valid email address

");   }
  return(""); // no error
}// end validate email

// Validate Address
function validateAddress(){
  var alphanum = /[0-9a-zA-Z ,.

]+/;
  var addr = d.f["registration"]["address"];
  if (addr.value.length == 0) {
    addr.focus();
    addr.select();
    return("An address is required

");
  }
  else 
  if (addr.value.match( alphanum ) ) {
       return(""); // no error
  }
  else
  {
    addr.focus();
    addr.select();
    return("Alpha-numeric characters only for address 

"); 
  }
}// end validate address

// Validatr Membership Type
function validateMembership(){
  var membership = d.f["registration"]["membership"];
  if ( membership.value == "default"){
      membership.focus();
      return("Membership type must be selected

"); 
  }
  return(""); // no error
}// end validate membership type

// Validate (Membership) Duration
function validateDuration(){
  var mDuration = d.f["registration"]["duration"];
  if (mDuration.value == "default") {
    mDuration.focus();
    return("Membership duration must be selected 

");
   }
   return(""); // no error
}

submit.onclick = function() {
   error_message = "";
   d.g("errormsg").innerHTML="";
   d.g("errormsg").style.visibility="hidden";
};

#errormsg {

 color: #f00;
 position:absolute;
 top:  10vh;
 left: 42vw;
 width: 20vw;
 padding: 10px;
 border: 2px solid #000;
 box-shadow: 2px 2px 6px #777;
 visibility:hidden;
}

span {
color:black;
}

.button {
background:#000;
color:#0f0;
}




    
        Individual/Company Details
        

        Fields with an asterisk (*) are required
        

        

        First Name *: 
        

        
        

        Last Name *: 
        

        
        

        Username *: (alpha-numeric characters only) 
        

        
        

        Password *: (8 characters with 2 characters being numbers) 
        

        
        

        Date of Birth: (dd/mm/yyyy) 
        

        
        

        Gender: 
        

        

        Male
        Female
        
        

        E-mail *: 
        

        
        

        Address *: (alpha-numeric characters only)
        

        
        

    
    
        Membership
        

        Membership Type *:

Note, I changed the validation for the address field so that a user wouldn't get penalized for entering a comma, space or period as users are accustomed to do.

Comments should be used sparingly, otherwise they can obscure noticing the important items.

I used some short-hand to reduce the verbosity of the code. Also, I eliminated the variable error in the various validation functions and instead return the appropriate message which gets appended to the error_message.

Also, the alert() is gone, replaced with feedback on the webpage which is more convenient for the user. Note, in this case the submit button's onclick attribute is useful for removing old error messages.

Parenthetically-speaking, if the OP wishes to accommodate users who don't identify as traditionally male or female, one may wish to take a cue from Facebook rather than have an "Other" category (see here).

Javascript Form Validation - missing something?

Answers (2)

Related Questions