HTML
<form class="register-form" name="formRegister">
<p class="form_logo">
<img title="" alt="" src="img/logo.png" class="">
</p>
<label ng-class="{ 'has-errors' : formRegister.userEmail.$invalid && !formRegister.userEmail.$pristine, 'no-errors' : formRegister.userEmail.$valid}">
<input focus id="registerEmails" type="email" placeholder="Email" ng-model="userEmail">
</label>
<label ng-class="{ 'has-errors' : formRegister.userPassword.$invalid && !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
<input focus type="password" placeholder="Password" id="userPassword" name="userPassword" ng-model="userPassword" required />
</label>
<label ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && !formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
<input focus type="password" id="confirmPassword" name="confirmPassword" placeholder="Retype Password" ng-model="confirmPassword" required compare-to="userPassword">
</label>
<div class="msg-block ng-invalid" ng-show="formRegister.$error">
<span class="msg-error ng-invalid" ng-show="formRegister.confirmPassword.$error.pwmatch">
Password doesn't match.
</span>
</div>
<button ng-click="doRegister()" class="button button-block button-balanced" ng-disabled="formRegister.$invalid" style="padding:0 !important">
SIGN UP
</button>
<p class="message">Already registered? <a ng-href="#/app/login">Sign In</a></p>
</form>
Directive
//password compare
app.directive('compareTo', [function () {
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function (scope, element, attributes, ngModel) {
var firstPassword = '#' + attributes.compareTo;
element.on('keyup', function () {
scope.$apply(function () {
var v = element.val() === $(firstPassword).val();
ngModel.$setValidity('pwmatch', v);
});
});
}
};
}]);
//move to next input when enter
app.directive('focus', function () {
return {
restrict: 'A',
link: function ($scope, elem, attrs) {
elem.bind('keydown', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
// elem.next().focus();
if (elem.attr('id') == "registerEmail") {
$(':input:eq(' + ($(':input').index(this) + 1) + ')').on('focus', function () {
$(this).attr('type', 'date');
});
$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus().click();
}
else {
$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
}
}
});
}
}
});
<form class="register-form" name="formRegister">
<p class="form_logo">
<img title="" alt="" src="img/logo.png" class="">
</p>
<label ng-class="{ 'has-errors' : formRegister.userEmail.$invalid && !formRegister.userEmail.$pristine, 'no-errors' : formRegister.userEmail.$valid}">
<input focus id="registerEmails" type="email" placeholder="Email" ng-model="userEmail">
</label>
<label ng-class="{ 'has-errors' : formRegister.userPassword.$invalid && !formRegister.userPassword.$pristine, 'no-errors' : formRegister.userPassword.$valid}">
<input focus type="password" placeholder="Password" id="userPassword" name="userPassword" ng-model="userPassword" required />
</label>
<label ng-class="{ 'has-errors' : formRegister.confirmPassword.$invalid && !formRegister.confirmPassword.$pristine, 'no-errors' : formRegister.confirmPassword.$valid}">
<input focus type="password" id="confirmPassword" name="confirmPassword" placeholder="Retype Password" ng-model="confirmPassword" required compare-to="userPassword">
</label>
<div class="msg-block ng-invalid" ng-show="formRegister.$error">
<span class="msg-error ng-invalid" ng-show="formRegister.confirmPassword.$error.pwmatch">
Password doesn't match.
</span>
</div>
<button ng-click="doRegister()" class="button button-block button-balanced" ng-disabled="formRegister.$invalid" style="padding:0 !important">
SIGN UP
</button>
<p class="message">Already registered? <a ng-href="#/app/login">Sign In</a></p>
</form>
Directive
//password compare
app.directive('compareTo', [function () {
return {
require: "ngModel",
scope: {
otherModelValue: "=compareTo"
},
link: function (scope, element, attributes, ngModel) {
var firstPassword = '#' + attributes.compareTo;
element.on('keyup', function () {
scope.$apply(function () {
var v = element.val() === $(firstPassword).val();
ngModel.$setValidity('pwmatch', v);
});
});
}
};
}]);
//move to next input when enter
app.directive('focus', function () {
return {
restrict: 'A',
link: function ($scope, elem, attrs) {
elem.bind('keydown', function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
// elem.next().focus();
if (elem.attr('id') == "registerEmail") {
$(':input:eq(' + ($(':input').index(this) + 1) + ')').on('focus', function () {
$(this).attr('type', 'date');
});
$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus().click();
}
else {
$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
}
}
});
}
}
});
