Validation strategies with AngularJS - model-view-controller

I'm evaluating AngularJS and so far I'm very enthusiastic about it. But there's something missing on the validation front: the available options, such as the built-in mechanisms and the AngularUI initiative, implement validators through directives and, as such, every validation should be declared in the view:
<form ng-controller="SomeController">
<!-- Notice the 'required' attribute directive below: -->
<input type="text" ng-model="user.name" name="uName" required />
</form>
In this example, the view is defining that user.name is required. It's like saying the view defines the proper shape of the model. Isn't it a little backwards? Shouldn't the view reflect the states, including error states when it's the case?
Am I mistaken? I'm wondering if it's possible to apply any validators in the controller, signaling the model's data as valid/invalid, and updating the view accordingly (painting form controls with red, showing error messages, clearing previous errors and so on). I'm assuming AngularJS is powerful enough for this, but in the docs and samples so far I just haven't seen anything like I've described above. Thanks!

I guess its all about perspective. The way I see it is, you are defining a view which contains a form and that form contains an input of type text. It is this text input that you are marking as required. If you note, angular does not care if the text is user.name or user.age or whatever else. Its just associating that text input with required. So its just validating that text input and the model associated with that model is the final result ( the place where the value goes in if the validation passes! ).
Have a look at
http://docs.angularjs.org/guide/forms
for custom form validations, if you want to to be doing validations that are not the default ones.
Since you already know the view that is getting produced in advance ( lets call it at compile time! ) , you can associate all validators in the view and hence wouldnt have to do it in the controller (which perhaps is for run-time validation! ).

Related

Ember How validate form?

I research about validate form.
I understand Ember does not know how to work with attributes validation HTML5(required, pattern ). For this need created functions with algorithm validation in model for each form. And run that function when click submit button
I have a question: I have possibility show standard HTML5 error message for not valid input?
For example: I check all fields(in Ember model) and one field not valid. We need for this field show notice that field is not valid at help HTML5(maybe run for this element valid() function) How do that?
Have a look at this project ember-easyForm and this introductory blog post.
It makes creating forms in ember a lot easier, and it also includes validation.
Hope it helps.

How can I take better advantage of Entity Model validation?

I currently have:
#Html.EditorFor(model => model.PurchasePrice)
I would like to split this into 2 separate fields separated by a decimal (for price input obviously). But if I do that using basic text boxes I will loose the ability to take advantage of ASP.NET's validation.
Is there a way to do this, in Razor or by using attributes, so that I am able to keep the JS and server-side validation against my Entity model?
I can easily do it somewhere else by creating my own functions within the viewmodel, but I'm new to MVC3 and not entirely sure if that would be the best route or there is a simpler method.
Edit:
This is kind of the direction I am thinking, I do not fully understand how this works.
I set 2 fields, 1 as ppDollar and 1 as ppCents. In the controller I have:
modelname.PurchasePrice = Request["ppDollar"] + Request["ppCent"];
But, I can look at that and tell that's not going to work. So, I guess the question really is how is user input validated against the entity model and how can I better take advantage of the built in functionality?
You can create custom editors for particular types that are rendered by EditorFor. You can find a lot of examples of how to do this online, most of them focusing on a custom DateTime editor but the same idea applies to any type. Just one example from a quick search:
http://buildstarted.com/2010/09/10/overriding-displayfor-and-editorfor-to-create-custom-outputs-for-mvc/
In short, the process is:
Create a partial view template, placed in the Views\Shared\EditorTemplates folder, with the same name as the type (e.g. Decimal.cshtml).
The view should use, as its model, the type you want to display: #inherits System.Web.Mvc.WebViewPage<System.Decimal>
Make the view display whatever you want, using some field naming convention or whatever.
You can also pass HTML attributes via the appropriate EditorFor overload, referenced in your template through the ViewData.ModelMetadata.AdditionalValues property.
One thing to note: once you define an editor template it will be used for every call to EditorFor. You can scope them to a specific controller by moving the EditorTemplates folder into the appropriate view subfolder instead of the shared one.

JSP form nested checkboxes

A project was passed onto me a short while ago which uses JSP for the view and spring 3.1 for the controller - both of which I have little experience in and as per usual, there are about 4 comments in the whole thing. Anyway, my issue is this, in replacing a
<form:checkboxes path="class.list" items="${items}" delimiter="<br />" />
With
<c:forEach var="item" varStatus="vs" items="${items}">
<form:checkbox path="class.list" item="${item}" />
// check if nesting is required, if so create div and nested list point to class.list.children
</c:forEach>
Seems to create additional elements in my class.list which are not selected leading to a break further on.
Any guidance would be greatly appreciated.
I would suggest leaving the form:checkboxes intact as it is a compact way to generate checkboxes. I do not know of a compelling reason not to use the spring form tags if it is already in place and working. As to why you are seeing hidden fields. See here:
http://static.springsource.org/spring/docs/2.5.x/reference/view.html
Here is the relevant portion:
What you might not expect to see is the additional hidden field after each checkbox. When a checkbox in an HTML page is not checked, its value will not be sent to the server as part of the HTTP request parameters once the form is submitted, so we need a workaround for this quirk in HTML in order for Spring form data binding to work. The checkbox tag follows the existing Spring convention of including a hidden parameter prefixed by an underscore ("_") for each checkbox. By doing this, you are effectively telling Spring that “ the checkbox was visible in the form and I want my object to which the form data will be bound to reflect the state of the checkbox no matter what ”.
Hope this helps.

Struts 2 - Conditionallly display elements on page based on validation errors

I'm looking into the fielderror tag for struts and was wondering if it was possible to conditionally show certain elements on the page based on whether or not there are any validation errors. I want to do something like this (which currently does not do what i want it to):
<s:fielderror>
This is a test link
<s:param>field1</s:param>
<s:param>field2</s:param>
<s:param>field2</s:param>
</s:fielderror>
I would like the anchor tag to show up ONLY if one of the fields referenced by the param tags is invalid. In other words, if something is invalid in this fielderror block, I would like to display some HTML. The way it is coded above, the anchor tag is always displayed.
I think I can certainly do this with jQuery, but i was wondering if there was a way to do this natively in Struts that perhaps I'm overlooking. I've tried looking at things like the label and title attribute, but nothing seems to be working.
thanks in advance!
~j
There's nothing out-of-the-box, at least not like the way you want it.
Personally, I find your construct quite counter-intuitive: it doesn't execute/render like it reads.
A few options: do it "manually", create a tag to do it, or do it outside of the view. All rely on using ValidationAware.getFieldErrors() to grab the map and do some minimal logic.
The manual approach would use <s:if> to check for the presence of fieldErrors['fieldName'] for each field. Wrapped up in a simplistic JSP-based custom tag would produce something like:
<if:fieldErrors for='field1, field2, field3'>
<a ...>
</if:fieldErrors>
IMO doing most of the work in Java is cleaner, and easier to test. This could mean doing all the work in the action (or utility) and exposing only a single flag to the view, or using a thin JSP-based tag to call the utility. Either way, it's easier to test outside of a container, and removes inappropriate view logic.

How to ignore a default value using the CodeIgniter Validation Helper

I have validation on all areas of a form, and within the inputs I have hints which are set in the input's Value.
However, the problem I have is that CodeIgniter see's the input as being filled in so a Validation error doesn't occur.
I know I can create a callback_function for each input, but with around 10 forms and 100 inputs I was hoping to avoid this and possibly create a generic function or rule?
Any help is greatly appreciated
You seem to be setting default values for your inputs when what you really want is a placeholder
So instead of this:
<input value="Enter your email" />
You want this:
<input placeholder="Enter your email" />
Depending on how you are setting up your input data, a single callback function could suffice if you really needed it, but really: Don't start hacking up Codeigniter for this. Just use placeholder as it was intended (see javascript solutions for older browsers).
Read more about it here:
http://diveintohtml5.ep.io/forms.html#placeholder
I am assuming what you mean is this:
Ghosted Values http://img864.imageshack.us/img864/8124/ghosted.png
Where the value in there is never meant to be the actual value?
The easy solution is to have a class on the <input> that indicates that it's using a stock input (and also it can grey the text out). When the user clicks in the field javascript can clear the initial value out for you (and remove the marker class).
You can then on the submit button click event go through the form and clear the values of anything with the marker class before you actually submit the form.

Resources