Javascript validating numerous fields

Question

I am trying to do several validations through javascript/jQuery. I need to know what kind of logic I can use.

I have around 15 fields to validate. I was thinking if I could validate each field with a return value of true or false. I would then check if any of the returned values is false. If it is then the form is not validated. Does this makes sense?

Or do I have to go through a set of if else nested conditions, for one field after another?

PS: I don't want to use the jQuery validate plugin since there are few complications in my form.

Let me know what you think how I should do it.

Thanks.

You can take any example of a form. I need to know the logic of how to go around with validating several fields. Do, I use nested if-else? Or validate each field separately? I think I might have to separately validate each field since, if the forms fails to validate then I need to the tell the specific error messages. — Blueboye, Jul 25 '11 at 19:53

score 1 · Answer 1 · answered Jul 25 '11 at 19:53

1

Yes, this is one way you could do it but obviously you will have to contain your results in some kind of data structure. You could have an object that is key->value where the key is the id of the field you are validating and then the value is true or false depending on your validation. Then just iterate through your object and check for false values!

answered Jul 25 '11 at 19:53

Evan

5,975
8
34
63

1

if there is an error just make the value the error message, and if it passes just make the value true. In this case you can just do if (value != true){your code...} – Evan Jul 25 '11 at 19:55
$.each(validationElements, function(key,value){ { if (value != true){your code...} }); – Evan Jul 25 '11 at 20:01

score 0 · Answer 2 · answered Jul 25 '11 at 19:55

0

I would add a css class required then

$('.required').each(function (i) {

});

answered Jul 25 '11 at 19:55

Joe

80,724
18
127
145

score 0 · Answer 3 · answered Jul 25 '11 at 20:56

You could use an errors hash like object.

$('#target').submit(function (e) {
  var errors = {};

  //No field should be blank
  $('.required').each(function () {
    if (!$.trim($(this).val())) errors[$(this).prev('label').text()] = 'is blank';
  });
  //Don't submit form on errors
  //Show errors
  if (!jQuery.isEmptyObject(errors)) {
    $('.error').show().html("<p>Form couldn't be submitted because:</p>");
    $('.error').append(
    $.map(errors, function (type, error) {
      return $('<p>', {
        text: error + '  ' + type
      }).get();
    }));
    // Prevent the form from being submitted
    return false;
  }
  $('.error').hide();
});

Customary jsFiddle link

score 0 · Answer 4 · edited May 23 '17 at 12:19

This is a shameless plug, but have you tried regula? I'm actively developing it and I know of at least one other person who is using it (yay!). It might address some of your complications. Also, if you could update your question with your complications, I can tell you how you can do it in regula. It'll save you from having to write your own validation.

regula also returns its validation results as an array of constraint violations and so you can see which element failed validation (among other things).

This answer has more information about regula's features, if you're interested.

Javascript validating numerous fields

4 Answers4