Laravel 5.5 form validation with VueJs2 - laravel-5

I am just wondering if you had a similar problem as me. Hope you can help me out.
I ve got a form inside vue component:
<form>
(vuecomponent :errors="{{$errors}}")</form>
Its returning array with forms errors:
errors:Array[2]
0:"The price field is required."
1:"The product field is required."
My quiestion is how to decide which error msg goes to which input field inside vue component.
The array may vary depends on how many errors we ve got back. I cant use this:
this.errors[0] go to 1st input etc
Any ideas ?

Related

Laravel Voyager Relationships Validation Error

Similar issue to: 4920 and 5108 in Github
After creating a relationship and setting them as "required" to have input:
Relationship with Rule/Validation
If there is nothing in the field after I submit, the validation message appears which is the expected behavior. Whenever I input anything into the field and submit, the form still releases the error message and won't let me submit the form which is unexpected.
Error
If I remove the JSON validation, it works and just submits as null/empty. I need the validation.
In 4920 and 5108 they said they solved it by placing the validation in a different field, but they didn't state where or which field to input the validation; can anyone point me in the right direction or tell me what the right field is?

Pre-filling a hosted MailChimp signup form with an email address shows validation errors

We're trying to pre-fill the email address field of a hosted MailChimp form. Here's the blog post that talks about exactly this matter: https://blog.mailchimp.com/how-to-pre-fill-items-on-your-mailchimp-hosted-form/.
So here's our Newsletter signup form without any validation errors:
https://camping.us2.list-manage.com/subscribe/post?u=761a52bbd46ab21474b3af314&id=5cc638b5e6.
The problem arises when I add an email address to the URL as the value for the first form field, MERGE0, like this (url-encoding the email address, so # becomes %40):
https://camping.us2.list-manage.com/subscribe/post?u=761a52bbd46ab21474b3af314&id=5cc638b5e6&MERGE0=test%40camping.info.
Now, the form correctly copies the email address into the input field with name MERGE0 but it also displays three validation error messages:
Note: the email address field is mandatory.
When I try to pre-fill the user's first or last name fields adding MERGE1=John or MERGE2=Doe to the form's url, all is well - no error happens. It seems to be a problem with mandatory fields.
I'm arguing that this is a problem on MailChimp's side but they refuse to help saying that this is custom code and none of their business.
Can anybody help fix these errors?
It turned out that the problem was caused by a mistake in the URL.
Instead of camping.us2.list-manage.com/subscribe/POST?u=761a52bbd46ab...
it had to be camping.us2.list-manage.com/subscribe?u=761a52bbd46ab...
And the errors were gone!
This really made sense in the end, because posting the form should actually trigger the validation.

Using laravel old function within a vuejs component

I have a vuejs component that contains a form, I want to use the laravel old function so I'm able to repopulate the input fields if the form validation fails.
My guess would be I'd need to do something like pass the old function in as a prop to the component possibly but not sure if this is the 'right' way of doing it.
I'm just looking for confirmation on the best way of doing this.
If you are not using ajax requests then yes the only way is to pass them as props. Probably send the whole array as one prop: <component :oldInputs="{{old()}}"></component>

Max and min on date input

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.

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