禁用角度js中的默認表單輸入錯誤

如何在文本輸入框下方禁用默認顯示的輸入錯誤消息。禁用角度js中的默認表單輸入錯誤

這是我的形式：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <script> 
      angular.module('myApp', []).controller("numOnlyRegex", function ($scope) 
      { 
      $scope.numOnlyRegex = /^\d{1,6}$/; 
        $scope.cityArray = ["hyderabad", "secunderabad", "delhi", "mumbai"]; 
      } 
      .controller('FormSubmitController', function($scope) { 
      $scope.submit = function($event) 
      { 
      if ($scope.myForm.$invalid) 
      { 
      $scope.myForm.$submitted = true; 
        $event.preventDefault(); 
      } 
      });  </script> 
    <!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>--> 
     <title>Registration Form</title> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="panel panel-login"> 
        <div class="panel-body"> 
         <div class="row"> 
          <div class="col-lg-12"> 
           <h2 class="text-muted">Registration form</h2> 
           <!--onSubmit="return validate()"--> 
           <div ng-app="myApp" ng-controller="FormSubmitController" > 
            <form name="myForm" action="RegistrationServlet.do" method="POST" > 
             First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname" placeholder="First Name" required/> 
             <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span> 
             <!--<p ng-show="myForm.uname.$invalid && !userForm.name.$pristine" class="help-block">Your name is required.</p>--> 
             <br/>           
             Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="uname" ng-pattern="/^[a-zA-]{3,20}/" required placeholder="Last Name"/> 
             <span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/> 
             <p>Password: 
              <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-minlength="3" ng-model="pwd" required placeholder="Password"/> 
              <span style="color:red" ng-show="myForm.pwd.$error.minlength">password cannot be less than 3 letters</span><br/> 
              Confirm Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-minlength="3" ng-model="pwd2" required placeholder="Confirm Password"/><br/> 
              <span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/> 
              Gender: <input type="radio" name="female" ng-model="color" value="female" ng-required="!color"/>Female <input type="radio" name="male" ng-model="color" value="male" ng-required="!color"/>Male <br/><br/> 
              Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,9}$/" ng-model="mobile" required placeholder="Mobile"/> 
              <span style="color:red" ng-show="myForm.mobile.$error.pattern">Please enter a valid mobile number</span><br/> 
              Email:<input type="email" class="form-control input-sm" name="email" ng-pattern="/\[email protected]\S+\.\S+/" ng-model="email" required placeholder="Email"/> 
              <span style="color:red" ng-show="myForm.email.$error.pattern">Invalid email address</span><br/> 
              Address:<textarea class="form-control input-sm" name="address" ng-model="address" required placeholder="Address"></textarea> 
              <span style="color:red" ng-show="myForm.address.$error.require == true">Address cannot be empty</span><br/> 
              Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/> 
              Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/><br/> 

              City: <select name="citySelection" ng-model="city" ng-options="city for city in cityArray" name='city' required> 
               <option value="">Select city</option> 
              </select> 
              <span ng-show="myForm.citySelection.$error.required"></span> 
              <br/><br/> 

              State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/> 
              Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/> 
              Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/> 
              <span style="color:red" ng-show="myForm.pin.$error.pattern">Only six-digit number is allowed</span> 
              <!--<input type="Submit" class="form-control btn btn-success" ng-submit="submit($event)" value="Submit" />--> 
              <button type="submit" class="form-control btn btn-success" ng-click="submit($event)">Submit</button> 
              <!--ng-disabled="myForm.$invalid"--> 
            </form> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>    
    </body> 
</html>

鏈接爲plunker

來源

2015-06-22 kittu

刪除'需要'文本輸入框。 – Sajal

如果我刪除「required」，表單將不會檢查空的/未填充的值 – kittu

@kittu代碼中有很多錯誤。這就是爲什麼它不按你的期望工作。請看這個更新的plunk，我修改了第一個字段的代碼（uname）http://plnkr.co/edit/8iSIvw?p=preview。它將在選項卡上進行驗證。 – Hurix

嘗試使用這種方法：

function validateMethod() { 
$scope.isValidated = true; 

if($scope.uname == '') { 
$scope.isValidated = false ; 
} 
//other custom validations 
return $scope.isValidated; 
}

修改的角代碼爲：

var valid = validateMethod(); 
if(valid) 
{ 
$scope.submit = function($event) 
      { 
      if ($scope.myForm.$invalid) 
      { 
      $scope.myForm.$submitted = true; 
        $event.preventDefault(); 
      } 
      }); 
}

來源

2015-06-22 05:59:41 Sajal

但我正在使用正則表達式的名字等 – kittu

是的，這將與ng模式照顧，你自己提到表單不檢查空/未填充的值，然後這有助於。 – Sajal

我的意思是所有的字段都是必需的，每個字段也有正則表達式。當輸入不正確時（因爲用戶輸入），我想顯示錯誤消息，並且在輸入不正確時不應提交表單（注意：我不想使用ng-disabled） – kittu

禁用角度js中的默認表單輸入錯誤

回答

相關問題