Max and min on date input - validation

How do I make restrictions on my date input in Angular 2? My code currently looks like this:
<input #birthday="ngModel" type="date" name="birthday" max="2012-12-12" min="2000-12-12" required ngModel>
The following date should be invalid, but it isn't:
What am I doing wrong?

Your issue is that it is showing is valid because the only validation you have is if it's required so the input is valid. Setting the max and min date only limit the input for the date. If you try to submit you should probably see an error such as this
If the above behavior is not enough since you are seeing the input as valid, you will need a custom validator. From your code, it seems like you are using a template driven form. Adding a custom validator to a template driven form is a little more complex but you can still do it. Here is a link to a tutorial for adding a custom validator to a template driven form
https://juristr.com/blog/2016/11/ng2-template-driven-form-validators/
NOTE
Be careful with the date input type as it is not supported in a lot of browsers. You should probably look at angular calendar components such as PrimeNG calendar.

Related

Laravel validation; human names for array fields

In Laravel form validation you can do this: file_description.* to validate each item of an array according to a set of rules. The problem is, the system automatically returns "file_description.1 is required" as an error message if the field is required and not filled in.
More on that here: https://ericlbarnes.com/2015/04/04/laravel-array-validation/
Now, I'm not a complex man, I just want the field to say "File Description 1 is required". I am aware you can set messages but a) my input arrays are dynamically generated by jquery (click to add more type scenario) so I'd have to use a loop like in the above example b) I feel like there must be a better way.
Is there a way to either extend the core validation system to simply return a humanized name for the array field as Laravel does with regular fields, or is there an option I missed in the docs that allows for this? I'd rather not get involved with doing some regex type search to fix this.

Angular2 dynamically update validation rules

In Angular2 I need to modify validation rules dynamically.On the selection of a value from a dropdown validation rules will be fetched from the database and they would be like
{filedName : FirstName, required : 1}.
Currenlty I'm suing template driven form validation but after searching a bit I have realised that I would have to use model driven approach. Any ideas on how to do that?
Edit
Answer by JayChase to the above mentioned question seems the right one in my scenario. But I have couple of queries.I can remove all validation rules by passing null to setValidators but how can I just remove required field validation.And is it possible for me to modify validation rules in template driven approach.
Update
I'm able to update validation rules by following JayChase's answer.I did not use async validation as it would have costed me too much server calls. So now the issue is how to update just the required field validation rule.Right now I'm removing all validations from the control.
form.controls["fieldName"].setValidators(null)
Any help on that would be much appreciated.

Symfony2 : Best way to check form, client side

I'm developing a form with Symfony2 : several text inputs and one file input (for one picture). I have defined some asserts (maxLength, minLength...) in my entity in order to check the form (isValid).
My problem is : if the user puts bad data in text input (text too long or too short...), he still can submit the form, and error and printed but the user have to re-choose his picture.
As I think it's impossible to keep the picture in the form after bad validation, I should maybe check the form in client side (javascript), before submit.
So, is there an automatic way to do this (to forbidden submit until data are correct)? Can we get the assert minLength, maxLength value in twig ?
Thank you !
Ben.
You can use js validation before submitting the data, using some js form validation tools, but this way you need the replicate the validation logic from the server, so if validation rules changes, you need to modify on both server and client side. I recommend this method to reduce the traffic between client-server.
If you don't want this, use ajax form submitting (example here). You still validate the form using symfony, but the page won't refresh, so you won't lose the attached file. But this generates additional traffic to server, and you also need to implement error displaying using javascript.

I would like to define a component as optionally required (based on another field's value)

I built two custom components using built-in CQ components. The components' JSP's, along with some custom javascript, have a line like below in order to leverage the built-in components (and their formatting, labels, etc.).
<cq:include path="." resourceType="foundation/components/form/dropdown" />
I have one each of my custom dropdown components on a form. I can mark field A and field B as both being required in their respective components' editor dialog. I can provide required messages so that when either field is blank and the form is submitted, I get a message that the fields are required (with my custom messages). However, what I really want to do is hide or disable field B based on the value supplied in field A. I'm handling this manually via jQuery. However, this of course presents a problem on validation. I want field B to be NOT required when it is hidden/disabled and for it to be required when it is enabled/visible. Since the showing/hiding is done client-side, the server-side validation has know knowledge of the change and still expect a value to be provided for field B.
I'm been trying to poke around in the CQ Widgets API to find if there is something I can do on the client side to set/unset the required property so that when the form gets posted it is handled correctly. I'm guessing that there isn't since the validation seems to be happening on post instead of client-side.
Any ideas/thoughts/options?
It turns out that the link from my comment gave me the idea that I can have custom server-side validation for my form, I just wasn't sure how to connect it to the field. It turns out that all I had to do was create a servervalidation.jsp file in my "B" component. CQ will see the servervalidation.jsp and automatically invoke it for my custom component.
I was then able to examine the submitted value of field "A" (by getting the parameter from the request object) and doing some other custom logic for my needs.
I was then able to optionally do this:
FieldDescription field = FieldHelper.getConstraintFieldDescription(slingRequest);
FieldHelper.checkRequired(slingRequest, field);

Form is not submitting

My form (Html.BeginForm) was submitting well, i added some records over the period of one month using this form.
Then i did some cleanup (i don't remember those cleanups :( ) and tested the form after some time and now it is not submitting with a date value.
I mean, there are some date fields associated with master and child models, if child's date fields are filled (no matter parent's date is filled or not), the form does not get submitted and if these are empty then it does provided this is the first attempt i.e. if i attempt first with filled dates and then with empty dates, submitting does not work. I have two validation summaries with excludePropertyErrors true and false, no error is shown.
I had custom date format, dd-MMM-yyyy, and respective unobtrusive validator as jQuery.validator.methods["date"]. The behavior is same after removing these on both IE and Chrome.
However, a sample form submitting to the same controller's action on the same view with a sample model depicting the same structure works fine !!!
How to troubleshooting this??
Seems to me that the model binder is working correctly for your expected params, but that specific form is not passing in the values correctly (while your test form does).
These are the things your should try:
Use the browser's built in network logger and see what your POST looks like
Check the cAsE and spellnig of your variable names on the form (they should match your params/POCO on the action signature)
Hope this helps some.
Thanks BiffBaffBoff for compare the two. I figured out the problem by enhancing the sample model, controller and view, adding fields and validations one by one and finally got the issue. It was my authorization action attribute which was missing on one of the Remote validation action for date, my controller requires authorization.
Thank you all who tried to help me out, without even looking at single line of code.

Resources