angular-validate | Painless form validation for AngularJS | Validation library

Typically, in these situations where a graphical element replaces the default, you have to get creative. In this case there is a input type="hidden" that is presumably replacing the select. Since jQuery Validate does not get automatically triggered when the value of the hidden element changes, you have to programmatically trigger this yourself.

Write a handler that forces validation of the hidden element that contains your value.

you can achieve onblur event with ng-show="mainForm.Email.$invalid && mainForm.Email.$touched" to

tag

by default mainForm.Email.$touched is false, on blur it will change to true

for proper validation change the tag type to email

you can add ng-keydown="mainForm.Email.$touched=false" if you don't want to show error message on editing the input tag

I didn't used angular-validate.js plugin

I have used jQuery Validate's handy addClassRules function to apply a rule to all elements of a given class ...

That's not the issue the .addClassRules() method was meant to solve. It's used for combining multiple standard rules into a single "compound" rule that can be applied using one class name.

Or, is there a better way to apply validation rules to multiple elements on something other than the name attribute?

If you simply want to apply individual rules using class names, the plugin is smart enough to pick those up and no special techniques or methods are needed.