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 test@test.test)

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};
        }
    }
});

Answer 3

UPDATE : This does NOT work ... well at least not in a way you'd like it to. Adding ng-non-bindable to the form or any input breaks ALL binding. So, your ng-model in the inputs won't work anymore. Sorry ....

ng-non-bindable is the answer to this problem. See my answer here:

https://stackoverflow.com/a/19387233/75644

Answer 4

Simple solution: init field with type 'text' and change type to 'email' by timeout. In this case angularjs won't add email validator and you will have the email keyboard.

<input type="{{type}}" />

$scope.type = 'text';  
$timeout(function() { 
    $scope.type = 'email'; 
});

http://jsfiddle.net/44pc5j8L/