Unable to use Angular JS Form Validation with Spring form tags

Question

I have created a JSP page using Spring Form tags and I'm trying to validate my form using AngularJS Form Validations. But form validations are not working.

Here's the snippet of the form:

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

I've included the Spring form tag library as : <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> and angular.min.js and bootstrap using cdn'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>

According to this, when the username is not pristine (or it's dirty) and it's empty then, it should show the line mentioned within span tag. But it's not showing it and in addition to this if this is the case, it should add 'has-error' class to the div and that's also not happening when checked on developer tools in chrome and firefox.

I went through this link and used data-ng- instead of ng- but issue wasn't resolved.

I'm not sure what's the exact issue so I'm unable to fix it.

Any help will be appreciated. Thanks in anticipation.

Pragam Shrivastava · Accepted Answer · 2017-01-22 19:29:25Z

You need to remove the action and use the 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>

Check out this fiddle https://codepen.io/sevilayha/pen/xFcdI

Collectives™ on Stack Overflow

Unable to use Angular JS Form Validation with Spring form tags

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related