如何驗證鏈接是否被點擊或不在angularjs

-1

我有一個表單，我通過角度消息驗證所有輸入標籤，但有一個鏈接點擊該鏈接表單會得到擴展，但最初表單會被隱藏。如何驗證鏈接是否被點擊或不在angularjs

所以，如果用戶點擊提交按鈕，他應該得到一個錯誤說，請點擊鏈接填寫更多的細節。

<!DOCTYPE html> 
<html> 

<head> 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
    <script data-require="[email protected]" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-app="myApp"> 
    <div class="container-fluid" ng-controller="myContoller"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <form role="form" name="memberForm" ng-submit="submitMemberForm()" novalidate=""> 
      <div class="form-group" ng-class="{'has-error':(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid}"> 
      <label for="userName" ng-hide="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid ">User Name</label> 
      <label class="help-block" ng-messages="memberForm.loginName.$error" ng-show="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid"> 
       <p ng-message="required">User name is required.</p> 
       <p ng-message="maxlength">maxlength</p> 
       <p ng-message="minlength">minlength</p> 
      </label> 
      <input type="text" class="form-control " ng-minlength="4" ng-maxlength="10" id="userName" name="loginName" ng-model="login.name" required/> 
      </div> 

      <div class="form-group" ng-class="{ 'has-error' : memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted) }"> 
      <label for="PostCode" class="" ng-hide="memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted)">Postcode*<a style="margin-left:20px;" href="" ng-click="ShowHide()">Address Search</a></label> 
      <label class="help-block" ng-show="memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted)">Postcode is a mandatory field</label> 
      <input type="text" name="postcode" class="form-control " ng-model="postcode" ng-maxlength="9" required> 
      </div> 

      <div ng-show="IsVisible"> 

      <div class="form-group" ng-class="{ 'has-error' : memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)}"> 
       <label for="Contact address" class="" ng-hide="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address*</label> 
       <label class="help-block" ng-show="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address is required</label> 
       <div class="clearfix"> 
       <select name="address" id="address" ng-model="user.address" class="form-control " required> 
        <option value="0">Address 1</option> 
        <option value="1">Address 2</option> 
        <option value="2">Address 3</option> 


       </select> 
       </div> 
      </div> 


      <div class="form-group" ng-class="{ 'has-error' : memberForm.town.$invalid && (memberForm.town.$touched || memberForm.$submitted)}"> 
       <label for="Town" class="" ng-hide="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)">Town*</label> 
       <label class="help-block" ng-show="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)"> Town is a mandatory field</label> 
       <input type="text" name="town" class="form-control " ng-model="user.town" required> 
      </div> 

      <div class="form-group" ng-class="{ 'has-error' : memberForm.country.$invalid && (memberForm.country.$touched || memberForm.$submitted)}"> 
       <label for="Country" class="" ng-hide="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)">Country*</label> 
       <label class="help-block" ng-show="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)"> Country is a mandatory field</label> 
       <input type="text" name="country" class="form-control " ng-model="user.country" required> 
      </div> 

      </div> 


      <div class="form-group"> 
      <button type="submit" name="sbt" class="btn-success btn">SUBMIT</button> 
      </div> 
     </form> 
     </div> 
    </div> 
    </div> 
</body> 

</html>

然後他應該提交擴展表格。

I have attached Plunker, on filing postcode and submitting the form it should ask me to click on address link to fill rest.

來源

2016-08-19 Gaurav Singh

-1

一個非常，非常簡單的解決方案是給形式的名稱，以便您可以參考它，然後捏捏ng-click只有形式是有效的火：

<form name="myform"> 
    <input type="text" ng-model='name' ng-required="true" /> 
    <button ng-click="myform.$valid && preview()">Preview</button> 
    <button ng-click="myform.$valid && update()">Update</button> 
</form>

叉形小提琴：https://jsfiddle.net/r8d1uq0L/

我喜歡從視圖分離驗證（業務關注），爲此我創建了egkyron，它允許您在代碼中定義模型約束並使用編程驗證以及標準的Angular表單驗證。

來源

2016-08-19 08:13:18

您應該使用布爾變量來顯示或隱藏警告消息。我編輯你的運動員，你可以在以下鏈接PLUNKR找到它。

$scope.showErrorMsg

是一個布爾變量，以幫助保持跟蹤，如果顯示或隱藏錯誤消息。

$scope.IsVisible

用於跟蹤用戶是否點擊鏈接並填寫所有必填字段。如果所有字段都填滿並且用戶單擊該鏈接，則顯示div並且錯誤消息消失。

// Code goes here 
 

 
angular.module('myApp', ['ngMessages']) 
 
.controller('myContoller', function ($scope) { 
 
    
 

 
    $scope.showErrorMsg = false; 
 
    
 
    $scope.ShowHide = function() { 
 
    
 
    
 
    if($scope.postcode) { 
 
     //If DIV is hidden it will be visible 
 
     $scope.IsVisible = true; 
 
     $scope.showErrorMsg = false; 
 

 
    } 
 
} 
 
    
 
    
 
    $scope.submitMemberForm=function(){ 
 
     
 
     
 
    if (!$scope.IsVisible){ 
 
     // display error message 
 
     $scope.showErrorMsg = true; 
 
     return; 
 
    } 
 
     
 
    $scope.submitMemberForm.$submitted=true; 
 
     if($scope.memberForm.$valid){ 
 
    
 
     alert("Success"); 
 

 
} 
 
} 
 
    
 
    
 
});

/* Styles go here */ 
 

 
.has-error .help-block{ 
 
    
 
    color:red; 
 
    font-weight:bold; 
 
    
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.8/angular-messages.js"></script> 
 

 
</head> 
 

 
<body ng-app="myApp"> 
 
    <div class="container-fluid" ng-controller="myContoller"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <form role="form" name="memberForm" ng-submit="submitMemberForm()" novalidate=""> 
 
      <div class="form-group" ng-class="{'has-error':(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid}"> 
 
      <label for="userName" ng-hide="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid ">User Name</label> 
 
      <label class="help-block" ng-messages="memberForm.loginName.$error" ng-show="(memberForm.loginName.$touched || memberForm.$submitted) && memberForm.loginName.$invalid"> 
 
       <p ng-message="required">User name is required.</p> 
 
       <p ng-message="maxlength">maxlength</p> 
 
       <p ng-message="minlength">minlength</p> 
 
      </label> 
 
      <input type="text" class="form-control " ng-minlength="4" ng-maxlength="10" id="userName" name="loginName" ng-model="login.name" required/> 
 
      </div> 
 

 
    <div class="form-group" ng-class="{ 'has-error' : memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted) }"> 
 
        <label for="PostCode" class="" >Postcode*<a style="margin-left:20px;" href="" ng-click="ShowHide()">Address Search</a></label> 
 
        <label class="help-block" ng-show="memberForm.postcode.$invalid && (memberForm.postcode.$touched || memberForm.$submitted)">Postcode is a mandatory field</label> 
 
        <input type="text" name="postcode" class="form-control " ng-model="postcode" ng-maxlength="9" required> 
 
    </div> 
 

 
      <div ng-show="IsVisible"> 
 

 
      <div class="form-group" ng-class="{ 'has-error' : memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)}"> 
 
       <label for="Contact address" class="" ng-hide="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address*</label> 
 
       <label class="help-block" ng-show="memberForm.address.$invalid && (memberForm.address.$touched || memberForm.$submitted)">Contact address is required</label> 
 
       <div class="clearfix"> 
 
       <select name="address" id="address" ng-model="user.address" class="form-control " required> 
 
        <option value="0">Address 1</option> 
 
        <option value="1">Address 2</option> 
 
        <option value="2">Address 3</option> 
 
        
 

 
       </select> 
 
       </div> 
 
      </div> 
 
      
 

 
      <div class="form-group" ng-class="{ 'has-error' : memberForm.town.$invalid && (memberForm.town.$touched || memberForm.$submitted)}"> 
 
       <label for="Town" class="" ng-hide="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)">Town*</label> 
 
       <label class="help-block" ng-show="memberForm.town.$invalid && (memberForm.town.$touched|| memberForm.$submitted)"> Town is a mandatory field</label> 
 
       <input type="text" name="town" class="form-control " ng-model="user.town" required> 
 
      </div> 
 

 
      <div class="form-group" ng-class="{ 'has-error' : memberForm.country.$invalid && (memberForm.country.$touched || memberForm.$submitted)}"> 
 
       <label for="Country" class="" ng-hide="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)">Country*</label> 
 
       <label class="help-block" ng-show="memberForm.country.$invalid && (memberForm.country.$touched|| memberForm.$submitted)"> Country is a mandatory field</label> 
 
       <input type="text" name="country" class="form-control " ng-model="user.country" required> 
 
      </div> 
 

 
      </div> 
 

 
      <label class="help-block" ng-show="showErrorMsg">Please click the link</label> 
 
      
 
      <div class="form-group"> 
 
      <button type="submit" name="sbt" class="btn-success btn">SUBMIT</button> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-19 09:21:34 StarsSky

如何驗證鏈接是否被點擊或不在angularjs

回答

相關問題