Moment.js and form validation

Hello,

I'm currently messing with moment to do of age validation. I'm not sure what bug is causing this form to submit, but this function is returned for onsubmit of the form.

function test_form()
{

var userName = document.regForm.userName.value;
var firstName = document.regForm.firstName.value;
var lastName = document.regForm.lastName.value;
var email = document.regForm.email.value;
var email2 = document.regForm.email2.value;
var password = document.regForm.password.value;
var password2 = document.regForm.password2.value;
var birthDay = document.regForm.birthDay.value;
var birthMonth = document.regForm.birthMonth.value;
var birthYear = document.regForm.birthYear.value;
var tou = document.regForm.tou.checked;

var formattedDate = birthYear + "-" + birthMonth + "-" + birthDay;
var eighteenYearsAgo = moment().subtract("years", 18);
var birthdayTest = moment(formattedDate);

var regSpec = /!|@|#|\$|%|-|_|&|\*|\(|\)|\+|\[|\]|\{|\}|:|;|'|"|\||\\|,|<|>|\.|\?|\/|\^/;
var regUser = /!|@|#|\$|%|&|\*|\(|\)|\+|\[|\]|\{|\}|:|;|'|"|\||\\|,|<|>|\.|\?|\/|\^/;

var noError = true;

// Test all fields for empty and dob format and tou acceptance

if(userName === "" || firstName === "" || lastName === "" || email === "" || email2 === "" || password === "" || password2 === "" || tou == false || birthDay == "--Day--" || birthMonth == "--Month--" || birthYear == "--Year--" )
{

  noError = false;
      document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " check for empty form fields.";


}

// Test all fields for applicable special characters

if(firstName.match(regSpec) || lastName.match(regSpec))
{

  noError = false;
     document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " no special characters in names.";

}

if(userName.match(regUser) || password.match(regUser) || password2.match(regUser))
{
   noError = false;
   document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " only '-' and '_' special characters.";

}

// Test emails for format and match

if(email.indexOf("@") == -1 || email.indexOf(".") == -1 || email2.indexOf("@") == -1 || email2.indexOf(".") == -1)
{

  noError = false;
       document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " please use valid email.";

}

// Test passwords for match

if(password != password2)
{

  noError = false;
    document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " passwords don't match.";

}

// test email for match

if(email != email2)
{

  noError = false;
   document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " emails don't match.";

}

// test age

if (!birthdayTest.isValid()) {
   
    noError = false;  

}else if (eighteenYearsAgo.isAfter(birthdayTest)){
  noError = true;  

}else{
   noError = false;
   document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " You must be atleast 18 years of age.";

}

// Send
 
  return noError;

}

Code (JavaScript):

Here's the div being used for error output.

    <div id="regFormError" style="visibility:hidden; display: none;" class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong><span id="errorOuput"></span>
    </div>

HTML:

 

1) Why are you accessing the form elements Netscape 4 style?

2) Why are you making extra copies of the values for nothing.

3) If you are declaring multiple VAR in a row, you only need to say var ONCE and then comma delimit them, for example:

var
  formattedDate = birthYear + "-" + birthMonth + "-" + birthDay,
  eighteenYearsAgo = moment().subtract("years", 18),
  birthdayTest = moment(formattedDate);

Code (markup):

Just be sure the LAST one has a semi-colon.

4) You might want to short-circuit out on your IF statements or get some ELSE in there, since you only have one errorOutput element so only the LAST error checked is shown.

5) why are you using both "display" and "visibility"? Though really you should either be adding/removing the error box from the scripting (since it's a scripting only element) or doing a class swap instead of manipulating STYLE.

6) I'd consider making an errors array, so that you just add errors to it. You could kill off that noErrors variable and instead check the count for the array, if the array count is zero, no errors... if non-zero you could show ALL the errors in your errorBox instead of just the one.

Though for all that -- you didn't actually include the code for birthdayTest, so we can't possibly tell if that's the problem or not.

 

The code for the birthday test is there. I think it is anyway. I'm pretty sure I got this working. It seems to work fine. I guess I would need someone that knows moment.js to be sure...

The other input is awesome too, thanks.

Visibility hides the error output and display puts it back into the style... It's set to none or something like that so the space it takes up while not visible doesn't effect the style..

var formattedDate = birthYear + "-" + birthMonth + "-" + birthDay;
var eighteenYearsAgo = moment().subtract("years", 18);
var birthdayTest = moment(formattedDate);

Code (JavaScript):

// test age
if (!birthdayTest.isValid()) {
  
    noError = false; 
}else if (eighteenYearsAgo.isAfter(birthdayTest)){
  noError = true; 
}else{
   noError = false;
   document.getElementById('regFormError').style.display = "block";
   document.getElementById('regFormError').style.visibility = "visible";
   document.getElementById('errorOuput').innerHTML = " You must be atleast 18 years of age.";
}

Code (JavaScript):

 

Yeah, I have no idea what "moment.js" is... though the calling convention of it (probably) returning what I'm assuming is an anonymous function seems a bit sketchy / wonky / not how things should be done.

 

Moment.js is basically a date-handler library for javascript, which allows a lot of "plain-text" modifications and formatting. It's bloat, but it's usually pretty okay for what it does. However, unless you're in need of a lot of date-manipulation, you're usually better off just modifying it without the library.