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
chand pbAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

krishna kishore mellacheruvu venkataCommented:
Can you try something like this in javascript?

if (!$('input[name^=program]:checked').length) {
    $('input[name^=program]')[0].focus();
}
0
chand pbAuthor Commented:
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
0
Julian HansenCommented:
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?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
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?
0
BigRatCommented:
@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?
0
BigRatCommented:
@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".
0
BigRatCommented:
@chand pb

Julian Hansen hasn't replied to my comments for an hour and I want to go to lunch, so I'll try again.

An error occuring is an event, so I'd suggest you use the event system. You write a directive, called say focusOn which sets the focus on an element according to a named event.
app.directive('focusOn', function() {
   return function(scope, elem, attr) {
      scope.$on(attr.focusOn, function(e) {
          elem[0].focus();
      });
   };
});

Open in new window

You set the attribute on the element like :-
<input type="text" focus-on="error4" />

Open in new window


where the "error4" is the event name and in you validation code you cause the event when you detect the error
 
$scope.$broadcast('error4');

Open in new window


You can obviously extend the system to include a list of events and "on" each one, and also use it to show error text, say in red, next to the element.

The idea is not mine but stems from Mark Rajcok
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Angular

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.