Please refer my HTML form attached
var app = angular.module('main_app',['ngRoute',"angucomplete-alt","ngStorage",'ui-notification','ngSanitize'])
.factory('myService', function () {
return {
say: function ($scope) {
return "Hello World";
}
}
})
;
app.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 20,
startRight: 10,
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'right',
positionY: 'top'
});
});
app.controller('RegisterGuestController', function($scope,$routeParams,$http,$location,$rootScope,Notification){
$scope.book_id = $routeParams.id_book;
$scope.loginBlock = true;
$scope.lostPassword = false;
//console.log($scope.book_id);
$http({
url: base_url+"api_user/register_guest",
method: "GET",
params: {book_id: $scope.book_id}
}).success(function(data){
if(data.return_code==1){
$scope.bookDetails = data.data.bookDetails[0];
//alert ($scope.bookDetails.name);
$('#frm_name').focus();
} else {
Notification.error({message: data.data.message, title: 'Error'});
}
});
}); <html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script></head>
<body ng-cloak class="" ng-app="main_app" >
<div class="registration-page" ng-init="register_guest()" >
<form method="post" id="registrationForm" name="frmregisterGuest" novalidate >
<div class="row">
<div class="col-sm-6 ">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_name.$invalid && frmregisterGuest.frm_name.$touched}" >
<label for="txtfirstname">first_name</label>
<input type="text" name="frm_name" value="" id="frm_name" class="form-control" ng-blur="validate=true" ng-model="frm_name" title="Enter your first name." required ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_name.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_name.$error.minlength" class="help-block">Min length of first name is 2</div>
<div ng-show="frmregisterGuest.frm_name.$error.maxlength" class="help-block">Min length of first name is 20</div>
<div ng-show="frmregisterGuest.frm_name.$touched && frmregisterGuest.frm_name.$error.required" class="help-block">Please enter first name</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : frmregisterGuest.frm_middleName.$invalid && frmregisterGuest.frm_middleName.$touched}" >
<label for="txtmiddleName">middle name</label>
<input type="text" name="frm_middleName" id="frm_middleName" ng-blur="validate=true" ng-model="frm_middleName" class="form-control" title="Enter your middle name." ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_middleName.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_middleName.$error.minlength" class="help-block">Min length of middle name is 2</div>
<div ng-show="frmregisterGuest.frm_middleName.$error.maxlength" class="help-block">Max length of middle name is 20</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group" ng-class="{ 'has-error' : frmregisterGuest.frm_lname.$invalid && frmregisterGuest.frm_lname.$touched}">
<label for="txtlastName">last name</label>
<input type="text" name="frm_lname" id="frm_lname" value="" class="form-control" ng-blur="validate=true" ng-model="frm_lname" title="Enter your last name." ng-pattern="/^[a-zA-Z']*$/" ng-minlength="2" ng-maxlength="20">
<div ng-show="frmregisterGuest.frm_lname.$error.pattern" class="help-block">Please enter only letters</div>
<div ng-show="frmregisterGuest.frm_lname.$error.minlength" class="help-block">Min length of last name is 2</div>
<div ng-show="frmregisterGuest.frm_lname.$error.maxlength" class="help-block">Min length of last name is 20</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_email.$invalid && frmregisterGuest.frm_email.$touched}">
<label for="txtemail">email</label>
<input type="email" name="frm_email" id="frm_email" value="" class="form-control" title="Enter your email address." ng-blur="validate=true" ng-model="frm_email" required ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/">
<div ng-show="frmregisterGuest.frm_email.$touched && frmregisterGuest.frm_email.$error.required" class="help-block">Please enter eamil</div>
<div ng-show="frmregisterGuest.frm_email.$error.pattern" class="help-block">Please enter correct email</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_password.$invalid && frmregisterGuest.frm_password.$touched}" >
<label for="txtpassword">password</label>
<input type="password" name="frm_password" id="frm_password" value="" class="form-control" title="Enter your password ." ng-blur="validate=true" ng-model="frm_password" required ng-minlength="6" ng-maxlength="10" >
<div ng-show="frmregisterGuest.frm_password.$touched && frmregisterGuest.frm_password.$error.required" class="help-block">Please enter password</div>
<div ng-show="frmregisterGuest.frm_password.$error.minlength" class="help-block">Min length of password is 2</div>
<div ng-show="frmregisterGuest.frm_password.$error.maxlength" class="help-block">Max length of password is 20</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group required" ng-class="{ 'has-error' : frmregisterGuest.frm_password2.$invalid && frmregisterGuest.frm_password2.$touched}">
<label for="txtpassword2">confirm password</label>
<input type="password" name="frm_password2" id="frm_password2" class="form-control" title="Enter your confirm_password." ng-model="frm_password2" required>
<div ng-show="frmregisterGuest.frm_password2.$touched && frmregisterGuest.frm_password2.$error.required" class="help-block">Please enter confirm password</div>
<div ng-show="(!frmregisterGuest.frm_password2.$error.required) && frmregisterGuest.frm_password2.$touched && frmregisterGuest.frm_password2.$error.noMatch" class="help-block">password does not match</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-5 col-sm-offset-1">
<div class="form-group">
<p class="lostpassword">
<a href="javascript:void(0)" ng-click="showBlock(1);">lost your password</a>
or
<a href="user/logout">already registered</a>
</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input type="hidden" id="bookId" name="bookId" ng-value="{{bookDetails.id_book}}" value="{{bookDetails.id_book}}">
<input type="button" ng-click="doRegister()" id="register" name="register" value="Register" class="btn btn-primary" ng-disabled="frmregisterGuest.$invalid" >
</div>
</div>
</form>
</div></body></html>I am setting focus to first field using following code in register_guest() JS function: $('#frm_name').focus();
The form works fine When I am not using focus().
But by setting focus to first field, when I click the 'already registered' link, it displays 'required field error message' and does not redirect. when I click second time on the same link, it redirects to required page.
I am using jquery version jquery-1.12.4 and AngularJS v1.4.1[enter image description here][1]
try to use attribute autofocus inside instead jquery focus()