Form onSubmit validation not working

Question

I want to use javascript to validate my form's input before sending the data to the php file. I tried using onSubmit, but for some reason the javascript function is getting skipped over and the data is going straight to the php file. I'm not sure what's wrong with my code- I'd initially put the javascript in another file, then I included it in the page itself with a <script> tag, it's still not working. Here's my code-

The form-

<form action="includes/register.inc.php" name="registration_form" method="post" onSubmit="return regform(this.form,
 this.form.first-name, this.form.last-name, this.form.signup-username, this.form.signup-email, 
this.form.signup-password, this.form.confirm-password);">

    <input id="first-name" name="first-name" type="text" placeholder="First Name"/>
    <input id="last-name" name="last-name" type="text" placeholder="Last Name"/>
    <input id="signup-username" name="signup-username" type="text" placeholder="Username"/>
    <input id="signup-email" name="signup-email" type="email" placeholder="E-mail"/>
    <input id="signup-password" name="signup-password" type="password"  placeholder="Password"/>
    <input id="confirm-password" type="password" name="confirm-password" placeholder="Confirm Password"/>

    <input type="submit" value="CREATE ACCOUNT"/>
</form>

Javascript-

function regform(form, fname, lname, uid, email, password, conf) {
 // Check each field has a value
if (uid.value == ''         || 
      email.value == ''     || 
      password.value == ''  || 
      fname.value == ''     ||
      lname.value == ''     ||
      conf.value == '') {

    alert('You must provide all the requested details. Please try again');
    return false;
}

// Check the username

re = /^\w+$/; 
if(!re.test(uid.value)) { 
    alert("Username must contain only letters, numbers and underscores. Please try again"); 

    return false; 
}

var alphaExp = /^[a-zA-Z\-]+$/;
if(!fname.value.match(alphaExp)) { 
    alert("First name must contain only letters and hyphens. Please try again"); 

    return false; 
}

if(!lname.value.match(alphaExp)) { 
    alert("First name must contain only letters and hyphens. Please try again"); 

    return false; 
}

// Check that the password is sufficiently long (min 6 chars)
// The check is duplicated below, but this is included to give more
// specific guidance to the user
if (password.value.length < 6) {
    alert('Passwords must be at least 6 characters long.  Please try again');

    return false;
}

// At least one number, one lowercase and one uppercase letter 
// At least six characters 

var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/; 
if (!re.test(password.value)) {
    alert('Passwords must contain at least one number, one lowercase and one uppercase letter.  Please try again');
    return false;
}

// Check password and confirmation are the same
if (password.value != conf.value) {
    alert('Your password and confirmation do not match. Please try again');

    return false;
}


// Finally submit the form. 
return true;
}

Answer 1

it's not this.form, since this already refers to the form. also you need to use brackets for any properties that contain a hyphen as JS will think it's a minus sign. this['last-name']

Answer 2

Try this. Instead of pass a bunch of params to the function, I'm passing the form itself, then pulling out values from there.

function regform(form) {
  // Check each field has a value
  if (form['signup-username'].value == '' ||
    form['signup-email'].value == '' ||
    form['signup-password'].value == '' ||
    form['first-name'].value == '' ||
    form['last-name'].value == '' ||
    form['confirm-password'].value == '') {

    alert('You must provide all the requested details. Please try again');
    return false;
  }

  // Check the username

  re = /^\w+$/;
  if (!re.test(uid.value)) {
    alert("Username must contain only letters, numbers and underscores. Please try again");

    return false;
  }

  var alphaExp = /^[a-zA-Z\-]+$/;
  if (!fname.value.match(alphaExp)) {
    alert("First name must contain only letters and hyphens. Please try again");

    return false;
  }

  if (!lname.value.match(alphaExp)) {
    alert("First name must contain only letters and hyphens. Please try again");

    return false;
  }

  // Check that the password is sufficiently long (min 6 chars)
  // The check is duplicated below, but this is included to give more
  // specific guidance to the user
  if (password.value.length < 6) {
    alert('Passwords must be at least 6 characters long.  Please try again');

    return false;
  }

  // At least one number, one lowercase and one uppercase letter 
  // At least six characters 

  var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
  if (!re.test(password.value)) {
    alert('Passwords must contain at least one number, one lowercase and one uppercase letter.  Please try again');
    return false;
  }

  // Check password and confirmation are the same
  if (password.value != conf.value) {
    alert('Your password and confirmation do not match. Please try again');

    return false;
  }


  // Finally submit the form. 
  return true;
}

<form action="" name="registration_form" method="post" onSubmit="return regform(this);">

  <input id="first-name" name="first-name" type="text" placeholder="First Name" />
  <input id="last-name" name="last-name" type="text" placeholder="Last Name" />
  <input id="signup-username" name="signup-username" type="text" placeholder="Username" />
  <input id="signup-email" name="signup-email" type="email" placeholder="E-mail" />
  <input id="signup-password" name="signup-password" type="password" placeholder="Password" />
  <input id="confirm-password" type="password" name="confirm-password" placeholder="Confirm Password" />

  <input type="submit" value="CREATE ACCOUNT" />
</form>