2017-08-24 121 views
1

我有兩個形式註冊的,並與下單控制器寫有兩個函數調用上正確提交的第一種形式的工作,但在註冊始終顯示錯誤 預覽這裏https://plnkr.co/edit/RS2LVc?p=preview角度驗證錯誤

var app = angular.module('abc', []); 
    app.controller('login', function ($scope) { 
    scope.LoginValidator = function ($event) { 
      if ($scope.LoginForm.$valid) { 
        console.log('Logged In'); 
      } else { 
         console.log("invalid"); 
         if ($scope.LoginForm.Email.$invalid) { 
          $scope.mailRequire = true; 
         } 
         if ($scope.LoginForm.password.$invalid) { 
          $scope.passRequire = true; 
         } 
         $event.preventDefault(); 
        } 
      }; 

然後碼登錄第二個功能從這裏開始,並顯示錯誤

$scope.SignupValidator = function ($event) { 

if ($scope.SignupForm.$valid) { 
    console.log("Valid"); 
} else { 
    alert('InValid Data'); 
    if ($scope.SignupForm.Fullname.$invalid) { 
     $scope.namerequire = true; 
    } 
    if ($scope.SignupForm.email.$invalid) { 
     $scope.emailrequire = true; 
    } 
    if ($scope.SignupForm.rollno.$invalid) { 
     $scope.rollrequire = true; 
    } 
    if ($scope.SignupForm.password.$invalid) { 
     $scope.passwordrequire = true; 
    } 
    if ($scope.SignupForm.confirm.$invalid) { 
     $scope.confirmrequire = true; 
    } 
    $event.preventDefault(); 
} 

}; 
}); 

回答

1

我更新了plunkr文件請檢查: -

// Code goes here 
 
var app = angular.module('abc', []); 
 

 
app.controller('login', function ($scope) { 
 
    $scope.LoginValidator = function ($event) { 
 
     if ($scope.LoginForm.$valid) { 
 
      console.log('Logged In'); 
 
     } else { 
 
      console.log("invalid"); 
 
      if ($scope.LoginForm.Email.$invalid) { 
 
       $scope.mailRequire = true; 
 
      } 
 
      if ($scope.LoginForm.password.$invalid) { 
 
       $scope.passRequire = true; 
 
      } 
 
      $event.preventDefault(); 
 
     } 
 
    }; 
 

 
    $scope.SignupValidator = function ($event) { 
 

 
     if ($scope.SignupForm.$valid) { 
 
      console.log("Valid"); 
 
     } else { 
 
      alert('InValid Data'); 
 
      if ($scope.SignupForm.Fullname.$invalid) { 
 
       $scope.namerequire = true; 
 
      } 
 
      if ($scope.SignupForm.email.$invalid) { 
 
       $scope.emailrequire = true; 
 
      } 
 
      if ($scope.SignupForm.rollno.$invalid) { 
 
       $scope.rollrequire = true; 
 
      } 
 
      if ($scope.SignupForm.password.$invalid) { 
 
       $scope.passwordrequire = true; 
 
      } 
 
      if ($scope.SignupForm.confirm.$invalid) { 
 
       $scope.confirmrequire = true; 
 
      } 
 
      $event.preventDefault(); 
 
     } 
 
    }; 
 
});
/* Styles go here */
<!DOCTYPE html> 
 
<html ng-app="abc"> 
 
<head> 
 
    <link data-require="[email protected]*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> 
 

 
    <script data-require="[email protected]*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="login"> 
 
    <br><br> 
 
    <form id="login-form" action="/home" name="LoginForm" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator($event)"> 
 
     <fieldset> 
 
      <input type="email" name="Email" id="email" tabindex="1" ng-model="login.email" ng-pattern="/^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]{2,}$/" placeholder="Email" ng-required="true"> 
 
      <span style="color:red; display:block; text-align:center;" ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">* Please Enter Valid Email</span> 
 
      <span style="color:red; display:block; text-align:center;" ng-show="mailRequire && !LoginForm.Email.$dirty">* Email required</span> 
 

 
      <input type="password" name="password" ng-minlength="8" id="password" tabindex="2" ng-model="login.password" placeholder="Password" ng-required="true"> 
 
      <div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid"><small style="color:red; display:block; text-align:center;">* Invalid Password</small></div> 
 
      <span style="color:red; display:block; text-align:center;" ng-show="passRequire && !LoginForm.password.$dirty">* Password required</span> 
 
      <input type="submit" value="LOG IN" /> 
 
     </fieldset> 
 
    </form> 
 
    <br><br> 
 

 
    <form id="Signup-form" name="SignupForm" action="/home" method="get" role="form" novalidate ng-submit="SignupValidator($event)"> 
 
     <input type="text" id="fullname" name="Fullname" tabindex="1" placeholder="Full Name" ng-minlength="4" ng-model="signup.name" ng-required="true" /> 
 
     <small style="color:red; display:block; text-align:center;" ng-show="SignupForm.Fullname.$error.minlength">* Atleast 4 characters</small> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="namerequire && !SignupForm.Fullname.$dirty">* Name required</span> 
 

 
     <input type="email" name="email" id="email" tabindex="1" ng-pattern="/^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]{2,}$/" placeholder="Email Address" value="" ng-model="signup.email" ng-required="true" /> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="SignupForm.email.$dirty && SignupForm.email.$error.pattern">* Please Enter Valid Email</span> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="emailrequire && !SignupForm.email.$dirty">* Email required</span> 
 

 
     <input type="text" id="rollno" name="rollno" ng-minlength="8" tabindex="1" placeholder="Class Number Eg.(UOS131111)" ng-model="signup.roll" ng-required="true" /> 
 
     <span ng-show="SignupForm.rollno.$error.minlength" style="color:red; display:block; text-align:center;">*Invalid Rollno </span> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span> 
 

 
     <input type="password" name="password" id="password" ng-minlength="8" tabindex="2" placeholder="Password " ng-model="signup.password" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" ng-required="true" /> 
 
     <span ng-show="SignupForm.password.$error.minlength" style="color:red; display:block; text-align:center;"><small>* Minimum eight characters</small></span> 
 
     <span ng-show="SignupForm.password.$error.pattern" style="color:red; display:block; text-align:center;"><small>* At least one digit</small></span> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="passwordrequire && !SignupForm.password.$dirty">* Password required</span> 
 

 
     <input type="password" name="confirm" id="confirm-password" ng-minlength="8" tabindex="2" placeholder="Confirm Password" ng-model="signup.confirm" ng-pattern="signup.password" ng-required="true" /> 
 
     <span ng-show="SignupForm.confirm.$error.pattern" style="color:red; display:block; text-align:center;"><small>* Password didn't match</small></span> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="confirmrequire && !SignupForm.confirm.$dirty">* Re enter Password</span> 
 

 
     <input type="radio" name='Gender' ng-model="signup.gender" value="male" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span> 
 
     <input type="radio" name='Gender' ng-model="signup.gender" value="female" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span> 
 
     <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span> 
 
     <input type="submit" value="SIGN UP" /> 
 
    </form> 
 
</body> 
 

 
</html>

2

你有一個錯誤的單選按鈕,驗證單選按鈕,它需要一個值。所以單選按鈕的HTML改變爲下面,

<input type="radio" name='Gender' ng-model="gender" value="male" ng-required="!gender"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span> 


<input type="radio" name='Gender' ng-model="gender" value="female" ng-required="!gender"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span> 

Documentaion for radio button

Here is a WORKING DEMO