Question

我使用Spring Form标签创建了一个JSP页面，并尝试使用AngularJS Form Validations验证我的表单。但表单验证无效。

以下是表单的摘要：

<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>

我已将Spring表单标记库包括在内： <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 和 angular.min.js和bootstrap使用cdn＆＃39; s：

<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>

根据这个，如果用户名不是原始的（或者它很脏）而且它的为空那么，它应该显示该行在span标签中提到。但它没有显示它，除此之外，如果是这种情况，它应该将＆＃39; has-error＆＃39; 类添加到div和那个在chrome和firefox中检查开发人员工具时也没有发生。

我浏览了这个link并使用了数据-ng- 而不是 ng - 但问题没有得到解决。

我不确定确切的问题是什么，所以我无法修复它。

任何帮助将不胜感激。感谢您的期待。

Answer 1

您需要删除操作并使用ng-submit

<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>

看看这个小提琴 https://codepen.io/sevilayha/pen/xFcdI

无法使用带有Spring表单标记的Angular JS表单验证

1 个答案: