Turn off email validation

Question

I have the following piece of html/angular

<input type="email" data-ng-model="myEmailVar" />
{{ myEmailVar }}

Now the problem is angular has an auto-validator for emails that won't set myEmailVar unless it passes correctly. So for instance if I enter "name" myEmailVar will not be set. You can see it here: http://jsfiddle.net/bFVsW/ (enter the word test, then enter [email protected])

Now, I want to run my own validation, but also support mobile. If I use type="email" some mobile browsers switch the keyboard layout to make inputting an address easier (such as the @ symbol). So I can't switch it to type="text". What i'd like to do is override the angular email validator or just turn it off completely as I'll be handling my own validation. Is that possible?

Answer 1

On HTML5 you can use the form's attribute novalidate to disable browser's validation:

<form novalidate>
    <input type="email"/>
</form>

Or you can use type="text"

Answer 2

For any body who is still searching for an answer, I found the answer in this stack overflow answer: How to disable angulars type=email validation?

Essentially you can add your own custom directive that disables the default angular validators.

angular.module('app').directive('disableValidators', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl){
            var validator = function(value){
                return value;
            };

            // replace other validators with our own
            ctrl.$parsers = [validator];
            ctrl.$formatters = [validator];
        }
    }
});

Another answer in that same thread presents a more detailed answer: How to disable angulars type=email validation?

Edit: This solution worked for me in the past, but no longer worked when I upgrade from angular 1.2.X to 1.3.X. It works, however, with a few minor tweaks:

angular.module('app').directive('disableValidators', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            var validator = function(value) {
                return value;
            };

            // replace the email validators
            ctrl.$validators = {email: validator};
        }
    }
});