2016-03-20 34 views
1

Spring Form etiketlerini kullanarak bir JSP sayfası oluşturdum ve AngularJS Form Validasyonlarını kullanarak formumu doğrulamaya çalışıyorum. Ancak form doğrulamaları çalışmıyor. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> ve angular.min.js ve önyükleme kullanarak cdn en:Yay form etiketleri ile Açısal JS Form Doğrulama kullanılamıyor

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
    rel="stylesheet"> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script> 
Ben Bahar form etiketi kütüphane yer verdik

<html ng-app> 
    <body> 
     <form:form name="signupForm" class="form-horizontal" action="/admin" 
      method="POST" modelAttribute="userVO" novalidate = "novalidate"> 

      <div class="form-group" ng-class="{'has-error' : signupForm.username.$error.required && signupForm.username.$dirty}"> 
        <label for="userName" class="col-sm-4 control-label" style="text-align:center;">Username<span class="rqrd">*</span></label> 
        <div class="col-sm-8"> 
         <form:input path="userName" placeholder="UserName" class="form-control" ng-model="signupForm.username" required="required"/> 
        </div> 
        <span ng-show="signupForm.username.$error.required && !signupForm.username.$pristine" class="help-block"> 
        Username is required 
        </span> 
      </div> 
      <div class="form-group" ng-class="{'has-error' : signupForm.password.$error.required && signupForm.password.$dirty}"> 
        <label for="password" class="col-sm-4 control-label" style="text-align:center;">Password<span class="rqrd">*</span></label> 
        <div class="col-sm-8"> 
         <form:password path="password" placeholder="Password" class="form-control" ng-model="signupForm.password" required="required"/> 
        </div> 
        <span ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" class="help-block"> 
        Password is required 
        </span> 
      </div> 
</body> 
</form:form> 
</html> 

: Burada

formun pasajı var

Buna göre, kullanıcı adı olduğu zaman bozulmamış (veya kirli) ve e mpty sonra, span etiketi içinde belirtilen satırı göstermelidir. Ancak, bu durum gösterilmiyor ve buna ek olarak, 'hataya' sınıfının div'a eklenmesini ve ayrıca krom ve firefox'ta geliştirici araçlarında kontrol edildiğinde de gerçekleşmemesi gerekiyor.

Bu link geçti ve veri Ng- yerine Ng- kullanılan ancak sorun çözülmedi.

Tam olarak sorunun ne olduğundan emin değilim, bu yüzden düzeltemiyorum.

Herhangi bir yardım için teşekkür ederiz. Beklentileriniz için teşekkürler.

cevap

1

Sen işlemin kaldırılması ve kullanmak gerekir

<html ng-app> 
    <body> 
     <form:form name="signupForm" class="form-horizontal" ng-submit="submitForm" novalidate> 

      <div class="form-group" ng-class="{'has-error' : signupForm.username.$error.required && signupForm.username.$dirty}"> 
        <label for="userName" class="col-sm-4 control-label" style="text-align:center;">Username<span class="rqrd">*</span></label> 
        <div class="col-sm-8"> 
         <form:input path="userName" placeholder="UserName" class="form-control" ng-model="signupForm.username" required="required"/> 
        </div> 
        <span ng-show="signupForm.username.$error.required && !signupForm.username.$pristine" class="help-block"> 
        Username is required 
        </span> 
      </div> 
      <div class="form-group" ng-class="{'has-error' : signupForm.password.$error.required && signupForm.password.$dirty}"> 
        <label for="password" class="col-sm-4 control-label" style="text-align:center;">Password<span class="rqrd">*</span></label> 
        <div class="col-sm-8"> 
         <form:password path="password" placeholder="Password" class="form-control" ng-model="signupForm.password" required="required"/> 
        </div> 
        <span ng-show="signupForm.password.$error.required && !signupForm.password.$pristine" class="help-block"> 
        Password is required 
        </span> 
      </div> 
</body> 
</form:form> 
</html> 

Kontrol dışarı bu keman ng gönderin https://codepen.io/sevilayha/pen/xFcdI