Form Validation Logic Vanilla JS

Question

I am looking for advice. I've got quite a large form I'm building and I've never done something like this before so I am trying to figure out the best way to do things. I'm working with vanilla JS to validate my fields. I want to set up essentially two layers of validation. The first layer would be for each individual field. On blur I want to check for little things, like, if it is a name input and they put numbers, or for the postal code that it follows the direct pattern.

For each of these I want to have a separate validator and, at the end, if all the little validations are true AND all the fields have been filled out, I want a disabled input to become enabled.

Can anyone guide me as to the best way to go about this?

Any help would be great.

score 2 · Accepted Answer · edited May 23 '17 at 12:06

Well, actually there is no best way, coz every dev will choose his own way to make validation. At least this is already automated by plugins. But some advices regarding to validation and forms in general can be helpful:

1) Always mark your required fields.

2) Depending on validation tests append/remove class from your inputs, so user can see what exsactly he doing wrong.

3) You can combine by class(or other attribute) your input validation(input group validation) For example you could have several text inputs with same validation rules:

var input = document.querySelectorAll('.someinputgroup');
    input.forEach(function (elem, index) {
        var that = input[index];
        validationRule(that);
    });

    function validationRule(elem) {
        elem.addEventListener('blur', function (e) {
            // validation....
        })
    }

4) If you want to use frontend email validation, take a look at this patterns: Validate email address in JavaScript?

5) If you expect dynamic inputs, that can be loaded through AJAX, you should wait for your inputs(solution - How to wait until an element exists?)

6) Use FormData() for collect large input values like base64 encoded images or large textarea text values(if you going to POST this data via AJAX)

7) And ofc always recheck validation on server side.

I hope it can be helpful.

score 0 · Answer 2 · answered Oct 11 '16 at 19:45

You could build simple "model" of your form, and then pass it serialized form, with triggering callbacks on invalid data and success. Similar to what Backbone.Model do.

I haven't test it, but here some code to give you idea of what i mean.

function SomeForm(options) {
   this.onSuccess = options.onSuccess;
   this.onInvalid = options.onInvalid;
}

SomeForm.prototype = {
  valiadate: function validate(data) {
    // Your validation logic
  },

  submit: function submit(data) {
    var validationErrors;

    validationErrors = this.validate(data);

    if (!validationErrors) {
      this.onSuccess(data);

      return;
    }

    this.onInvalid(validationErrors);
  }
};

function serializeForm(formEl) {
  var fields, data;

  data = {};
  fields = formEl.querySelectorAll('input, select, textarea');

  for (var i = 0; i < fields.length; i++) {
    if (fields[i].disabled === true || !fields[i].name) {
      continue;
    }

    data[fields[i].name] = fields[i].value;
  }

  return data;
}

var someForm = new SomeForm({/*callbacks*/});
var formEl = document.querySelctor('.foo');
someForm.submit(serializeForm(formEl));

Form Validation Logic Vanilla JS

2 Answers2