Question

I have the following validation code, which properly highlights all problem areas in my form IF the FIRST text-input or menu is left empty.

However, if you fill in the first text input and choose from the first select box, this validation lets you pass, incorrectly.

I’ve included my jquery for searching for empty text fields and select menus.. but if I need to paste the whole thing let me know.

// create error flag
var error = 0;

// check required text fields for empty values, add class 'problem' to cells with inputs that have problems
if (!$('#register-form .required input').val()) {
    $('.required input:text[value=""]').parent().addClass("problem");
    error++;
    console.log('errors: ' + error + '; required text input missing a value.')
}

// check required select menus for default selections, add class 'problem' to cells with select menus that have problems
if (!$('#register-form .required select option:selected').val()) {
    $('.required select option:selected[value=""]').parent().parent().addClass("problem");
    error++;
    console.log('errors: ' + error + '; required select box missing a value.')
}

but this validation fails if I satisfy (only) the first text input or select menu out of a set of required.

I obviously need this validation to check EVERY text input and every inside of a cell with class .required

Answer 1

$('#register-form .required').each(function() {

  var $input = $('input[type="text"]', this),
      $select = $('select', this);

  if(!$.trim($input.val())) {
     $input.parent().addClass("problem");
      error++;
      console.log('errors: ' + error + '; required text input missing a value.')

  }

  if(!$select.val()) {
      $select.parent().parent().addClass("problem");
      error++;
      console.log('errors: ' + error + '; required select box missing a value.'
  }

});