2

My web application is built using spring mvc and currently I am validating it via jquery on frontend and spring-mvc on backend. The code for this is something like

<form:input path="defaultDate" size="20" />
<form:errors path="defaultDate" />

for each element I have to place the form:errors control. Now I want to move to angularjs but not sure how to validate the backend code. I just want to use the simple html template instead of jsp code and templates and I can validate it easily via angularjs... something like

    <input ng-model="defaultDate" type="text" name="defaultDate" id="defaultDate" required />
    <label ng-show="userForm.defaulteDate.$invalid" class="error">Please enter val</label>

but how to validate it on server side and place the error correctly?

Improve this question
3
  • In my angular + Spring apps, validation and error messages are handled completely at client side, using Angular. Server-side validation simply throws an exception, in case the API is used directly or a malicious user bypasses the client-side validation, but this exception simply results in an Oops page in the application, and should never happen. Commented Apr 27, 2014 at 15:22
  • You mean we dont need to handle server side validation on angularjs apps? Commented Apr 27, 2014 at 15:24
  • 1
    No, you absolutely need to validate your inputs at server-side, at least to avoid problems with malicious users. But that doesn't mean that you need to display the errors caused by this server-side validation in a user-friendly way. You can do the user-friendly validation using angular, and only use server-side validation to handle malicious users. Responding with a 400 "bad request" to a malicious user isn't a problem. Commented Apr 27, 2014 at 15:30

2 Answers 2

Reset to default
2

While it's legitimate to suggest that validation logic should be pushed to the client and duplicated on the server side (but more generic in its response), there are validations that are more practical or only possible to perform on the server side. An example is a registration form verifying that a username is not already taken. So, you can't entirely dodge the problem of binding a server-generated message or error condition back to the client UI.

The Angular way of handling message binding is to hook into the NgModelController object of ngModel. Its $errors property can be decorated with as many keys as you have error conditions, and that property in turn can drive message display in the template. This is normally done with a custom validation directive added as an attribute to the input element. There's a good example of this here along with helpful explanation of the new ngMessages directive.

Angular provides the model controller and templating mechanism. Getting the messages into the server response, unpacking them on the client and binding them to the model controller is your responsibility. Note that you can access the form controller object by its name as a scope variable and the field models as properties of that. You won't see this initially in your view controller since the form controller doesn't come into existence until after the view has rendered, but callbacks in the controller handling a server response can use it. Here's an example of this approach with rails.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

As Jb Nizet noted in his comments, server-side and client-side validation should be separate layers, and you should do both.

To get you started in the right direction on this from an Angular perspective, you can use the input[date] directive that comes out of the box with Angular. Note, though, that it is less flexible if you're supporting non-HTML5 browsers. It would be prudent to explore the documentation on custom validation, because it makes it super easy to wire validation logic of any complexity to any input.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.