asked on

Auto focus on a check box on a form

Hello,
I have a form with many input field and some checkboxes and I am having an issue getting to focus on the checkbox when their is an error.

Here my directive

angular
    .module('mymod')
    .directive('psErrorFocus', ErrorFocus);

 function ErrorFocus($timeout) {
      return {
          restrict: 'A',
          link: function (scope, elem) {
              // set up event handler on the form element
              elem.on('submit', function () {
                  // find the first invalid element
                  var firstInvalid = elem[0].querySelector('.ng-invalid');
                  // if we find one, set focus
                  if (firstInvalid) {
                      firstInvalid.focus();
                  }
              });
          }
      };
  }

Open in new window

<form name="forms.confirmForm" ps-error-focus ng-submit="submitForm()">
</form>

Open in new window

When an error occur a class is added to the checkbox

<span class="togglerText ng-binding togglerError" ng-click="element.value.elementAnswer = !element.value.elementAnswer" [b]ng-class="{ 'togglerError': element.value.error }" [/b]style="">
            I am at least 18 years of age.
          </span>

Open in new window

How do I change the directive to work for checkboxes.

Thanks for your help

SOLUTION

krishna kishore mellacheruvu venkata

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chand pb

ASKER

Thanks for your help. but the information is create dynamically, No name or ID .
This is html that is generated

<span class="togglerText ng-binding togglerError" ng-click="element.value.elementAnswer = !element.value.elementAnswer" ng-class="{ 'togglerError': element.value.error }" style="">
I am at least 18 years of age.
</span>

So, I think I have to target the the span in the document and look for toggleError class and then focus. However, I need some help to change the directive to do this,. I think...

Thanks

Julian Hansen

As a matter of interest - why are you using a directive for this - you already have an onsubmit handler for the form - why not put your focus code in there?

Julian Hansen

When an error occur a class is added to the checkbox

But then you post html for a <span> - I am confused?

Where is the code for the checkbox?

BigRat

@Julian - Fair enough, but how do you suggest I provide the information without infringing copyright? After all the solution I was refering to is in fact the best way of doing it?

BigRat

@Julian - After reading the entire page there is THIS proviso :-

"Links to that forum are generally acceptable if the post has the accompanying description of the material, and is used to support a suggestion or comment."

which is EXACTLY the case which was "use an event and here's how it is done".

ASKER CERTIFIED SOLUTION

BigRat

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial