Angular JS设置焦点和必需的验证,需要点击链接两次才能打开链接

时间:2016-12-23 14:19:37

标签: angularjs validation focus required

请参阅我附带的HTML表格



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>
&#13;
&#13;
&#13;

我使用register_guest()JS函数中的以下代码将焦点设置到第一个字段: $(&#39;#frm_name&#39)聚焦();

当我不使用focus()时,表单正常工作。

但是,通过将焦点设置为第一个字段,当我点击已经注册的&#39;链接,它显示&#39;必填字段错误消息&#39;并且不重定向。 当我在同一个链接上第二次点击时,它会重定向到所需的页面。

我正在使用jquery版本jquery-1.12.4和AngularJS v1.4.1 [在此输入图像描述] [1]

1 个答案:

答案 0 :(得分:0)

尝试在内部使用属性autofocus而不是jquery focus()