CODEWITHSUNDEEP
javascriptjquery
3gwebtrain
3gwebtrain

Reputation: 15303

How to override a focus on tab or user click (focus)

In my form validation, on submit, I am validating the form, and finding the unfilled element and focusing using this function: works fine

switch (tagName) {
  case 'TEXT':
      if (!actualValue) {
          $(target).next('.error').css('display', 'block');
          that.submitIt = false;
          target.select();
      } else {
          $(target).next('.error').css('display', 'none');
          that.submitIt = true;
      }
      break;
  case "SELECT-ONE":
      if (actualValue === 'Select') {
          $(target).next('.error').css('display', 'block');
          that.submitIt = false;
          target.select();
      } else {
          $(target).next('.error').css('display', 'none');
          submitIt = true
      }
      break;
  case "RADIO":
  case "CHECKBOX":
      if (actualValue && actualValue !== 'undefined') {
          $(target).siblings('.error').css('display', 'none');
          that.submitIt = true;
      } else {
          $(target).siblings('.error').css('display', 'block');
          that.submitIt = false;
          target.select();
      }
      break;
}

But the problem is, the function not allowing the user to move next (using tab or manually switch to next field ).

How to override the focus on tab or manual move (focus) or arrow keys?

Live Demo

Upvotes: 0

Views: 469

Answers (1)

Cros
Cros

Reputation: 4377

The problem lies in the target.select() lines. Every time you validate your input field and the validation fails (e.g. when you try to leave the field) it will re-select that same field.

EDIT: Since you validate on focusout and then re-select I really don't see any other way around it than removing the target.select(). You can't have your cake and eat, as they say. The alternative is to only validate on submit.

The JQuery validation plugin, for instance, will mark a field as invalid on change and focusout, but won't select it. Probably because of this problem.

Upvotes: 4

Related Questions