Can I simplify/optimise this Jquery code at all?

Question

Hi guys,

I've wrote some code that will check two dates - they are split into two day inputs (#enddate-1-dd, #date-1-dd), two month inputs (#enddate-1-mm, #date-1-mm) and two year inputs (#enddate-1, #date-1)

I wanted to check first of all that they're all actually numbers, but then I wanted to check each one to make sure it's in a date format, at the moment it's like this:

function validate_form () {

retVal = true; // if the statements below fail, return true

if(retVal == true) {
 // check whether the available hours they've entered are a valid time!
 $(":text").each(function() {
  $this = $(this); // cache the object
  if (isNaN($this.val())) {
   $this.focus();
   $.jGrowl('Please enter a valid date!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

if(retVal == true) {
 $("#date-1-dd").each(function() {
  $this = $(this); // cache the object
  if ($this.val() > 31) {
   $this.focus();
   $.jGrowl('Please enter a valid day, should be no more than 31!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

if(retVal == true) {
 $("#enddate-1-dd").each(function() {
  $this = $(this); // cache the object
  if ($this.val() > 31) {
   $this.focus();
   $.jGrowl('Please enter a valid day, should be no more than 31!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

if(retVal == true) {
 $("#date-1-mm").each(function() {
  $this = $(this); // cache the object
  if ($this.val() > 12) {
   $this.focus();
   $.jGrowl('Please enter a valid month, should be no more than 12!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

if(retVal == true) {
 $("#enddate-1-mm").each(function() {
  $this = $(this); // cache the object
  if ($this.val() > 12) {
   $this.focus();
   $.jGrowl('Please enter a valid month, should be no more than 12!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

if(retVal == true) {
 $("#date-1").each(function() {
  $this = $(this); // cache the object
  if ($this.val() < 1900 || $this.val() > 3000) {
   $this.focus();
   $.jGrowl('Please enter a valid year!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

if(retVal == true) {
 $("#enddate-1").each(function() {
  $this = $(this); // cache the object
  if ($this.val() < 1900 || $this.val() > 3000) {
   $this.focus();
   $.jGrowl('Please enter a valid year!', { theme: 'smoke' });
   retVal = false; return false;
  }
 });
}

return retVal; // return either true or false, depending on what happened up there! ^

}

Sorry if it seems like I'm asking a silly question, as my code is working okay, I just think it's a rubbish way of doing it, with loads of repetition, but I can't really think of any way of doing it more efficiently?

Thanks

Answer 1

At first glance you could create a function from those identical sections and just call it as needed. You shouldn't repeat yourself.

Here is a blog post about validating dates that may be enlightening. And here's an SO answer that gives a jQuery plugin answer to date validation.

Answer 2

function validate_form_checks() {
    var error;
    // check whether the available hours they've entered are a valid time!
    $(':text').each(function() {
        if(isNaN($(this).val())) {
            $(this).focus();
            error = 'Please enter a valid date!';
            return false;
        }
    });
    if(error)
        return error;
    $('#date-1-dd, #enddate-1-dd').each(function() {
        if($(this).val() > 31) {
            $(this).focus();
            error = 'Please enter a valid day, should be no more than 31!';
            return false;
        }
    });
    if(error)
        return error;
    $('#date-1-mm, #enddate-1-mm').each(function() {
        if($(this).val() > 12) {
            $(this).focus();
            error = 'Please enter a valid month, should be no more than 12!';
            return false;
        }
    });
    if(error)
        return error;
    $('#date-1, #enddate-1').each(function() {
        if($(this).val() < 1900 || $(this).val() > 3000) {
            $(this).focus();
            error = 'Please enter a valid year!';
            return false;
        }
    });
    if(error)
        return error;
    return true;
}

function validate_form() {
    var result = validate_form_checks();
    if(result === true) {
        return true;
    } else {
        $.jGrowl(result, { theme: 'smoke' });
        return false;
    }
}

Of course, validation that provides feedback on all the errors in a form instead of just the first one is kind of, y'know, better.