Most Efficient Form Validation

Question

I'm looking for the most efficient method for form validation and I'm wondering if my current implantation is not only possible but sustainable when dynamically scaling. Take a look:

(Warning: Ignore silly HTML class names)

// --------- Validate Required Fields ----------
$('.valid8-form').submit(function() {
  // Array to Store Errors
  $('.valid8-errors').html('');
  var formValidationErrors = [];

  if ($('.valid8-requried').val() === '' || $('.valid8-requried').val() === null) {
    formValidationErrors.push('The ' + $('.valid8-requried').name + ' field is required!');
}

  // Place Errors In List on DOM
  for (var i = 0; i < formValidationErrors.length; i++) {
    $('<li>', {
      text: formValidationErrors[i]
    }).appendTo($('.valid8-errors'));
  }
});

Is there a way to do a forEach blank field in input add error string to the array? Right now, it only throws a string in the array for the first blank field it hits.

Answer 1

One thing you will want to consider for future scalability is the ease of maintaining your validation rule set and your form design. This is a good topic because there is no standard way to do this, but lots of ideas and the quest for the "best" is a good one.

I've done some work where I use JSON to define my form and then write a function to render the form for me. This consolidates information about the form, including validation rules, to an easily read and maintained object definition that can be loaded from a datasource if you want.

You can see an example of what I'm refering to in my question seeking a standard here: Is there an accepted or emerging JSON form and field definition format?

See the validation property on the form definition given there.

So, a good question to ask is: are we looking for script performance efficiency or are we looking for total ownership efficiency, where changes are easy to make? I think the former is less important if you are using a framework like jquery to handle your interrogations of the DOM. Efficiency has been attended to in that matter, for the most part. That leaves the question: what's the easiest way to maintain this when it grows far beyond our expectations? I think the JSON approach is a good one worth trying out.

As for script efficiency, I can tell you from benchmarking that your for(var i=0... is far faster than for(var obj in objs), so in that regard, you have achieved script efficiency.

One thing you could do to improve your efficiency is cache your DOM references.

var verrors = $('.valid8-errors');
$('.valid8-form').submit(function() {
  // Array to Store Errors
  verrors.html('');
  var vrequired = $('.valid8-required');
  var formValidationErrors = [];

  if (vrequired.val() === '' || vrequired.val() ===      null) {
    formValidationErrors.push('The ' + vrequired.name + ' field     is required!');
}

  // Place Errors In List on DOM
  for (var i = 0; i < formValidationErrors.length; i++) {
    $('<li>', {
      text: formValidationErrors[i]
    }).appendTo(verrors);
  }
});

This prevents multiple queries of the DOM to find the same object and should give a small performance boost, more notably with older browsers.