A guide to verifying array inputs in Laravel 5 with the help of proengsoft/laravel-jsvalidation

Greetings! I am currently attempting to validate an array input and select option in the following format:

<td width="23%">                                            
{!!Form::select('mmscod_id[]',['' => '- Select a material -'] +$mat,null,['class' => 'form-control', 'id'=>'mmscod_id'])!!}    
</td>

<td width="17%">
<input type="text" class="form-control" id="cantidad" name="vtcanp[]"/> 

</td>
<td width="17%">
<input type="text" class="form-control" id="precio" name="vtprep[]"/>
</td>

As part of my validation process, I am utilizing the proengsoft/laravel-jsvalidation package for client-side validation. On the back-end, I am incorporating Laravel's Form request.

In addition, I have referred to the methodology outlined on this website: How To: Validate an array of form fields with Laravel. However, I am encountering errors that are disrupting the process:

error1

error2

Edit: I neglected to mention that these elements are being generated dynamically. Any assistance would be greatly appreciated.

Answer №1

Laravel has the capability to validate array inputs by following a specific convention for validating array items.

$rules = [
    'vtcanp.*' => 'required',
];

For instance:

In my custom request class named InvoiceRequest:

class InvoiceRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        $rules =[
            'client' => 'required',
            'date' => 'required',
            'total' => 'required',
            'discount' => 'required',
            'item.*' => 'required',
            'rate.*' => 'required',
            'quantity.*' => 'required',


        ];


        return $rules;
    }
}

Additionally, in the view, include:

{!! JsValidator::formRequest('App\Http\Requests\InvoiceRequest') !!}

By employing these validations, error messages can be displayed with the corresponding position of the dynamically added input arrays in the view.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Undefined Children Component

I am currently working on creating Auth routes and I am facing an issue where the children are undefined, resulting in a blank page. In my App.js file, I have implemented a PrivateRoute component as shown below. Interestingly, when I replace PrivateRoute w ...

"Utilizing the power of MVC Modelbinding with the seamless integration

I am currently facing an issue with my Modelbinding and struggling to understand why it is not working. Here is the Controller snippet: public class ItemListController : Microsoft.AspNetCore.Mvc.Controller { [HttpPost] public async Task<IA ...

Modify the text and purpose of the button

I have a button that I would like to customize. Here is the HTML code for the button: <button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button> The corresponding JavaScript code is as follows: var search = n ...

Exploring Enumerations in Vue.js and Javascript

Is there a way to implement enums in a Vue file? I start by creating my enums in a JavaScript file const Status= Object.freeze({ Normal: "normal", Loading: "loading", Error: "error", Done: "done", }) ...

Trouble with the filter function in the component array

I am facing an issue with creating and deleting multiple components. I have successfully created the components, but for some reason, I am unable to delete them when I click on the "delete" button. state = { data: '', todoCard: [], id ...

Sending PHP form data to Google Chart via AJAX

After creating a PHP form drop-down list of table names in a database that captures the user's selection, I aim to use that selected table name to generate a Google chart. However, I'm encountering difficulties in passing the variable through AJA ...

Encountering difficulty locating the $wpdb variable during an AJAX request

I am currently developing a PHP application for WordPress and facing a challenge in retrieving a value from a database using AJAX every 2 seconds. I have created a new function in a separate file to handle this task. <?php global $wpdb; function retrie ...

JQuery table sorter is unable to effectively sort tables with date range strings

I am facing an issue with sorting a column in my table that contains text with varying dates. The text format is as follows: Requested Statement 7/1/2014 - 9/16/2014 When using tablesorter, the sorting does not work properly for this column. You can see ...

Despite the credentials being provided, the cookies are still not being sent with the request using the "include

I am currently utilizing express on the back end and react on the front end. To fetch user details from passport.js GoogleOAuth, I am using cors. The front end and back end are hosted on Heroku in separate domains. The client request is structured like so: ...

Executing code after sending an HTTP response in Next.js: A comprehensive guide

Executing code after sending an HTTP response in Express can be done like this: res.send() await someAsyncFunction() // assuming this function takes a significant amount of time In the case of Next.js, testing locally shows that the above code behaves sim ...

The path mappings specified in the tsconfig.json file are not resolving correctly during the

Everything runs smoothly with my imports during coding, but after building the project using tsc, the imported files are not resolving to valid paths. This is how my tsconfig.json looks: { "compilerOptions": { "target": "ES2 ...

Functional programming: Retrieve the initial truthy output from executing an array of diverse functions using a particular parameter

As I delve into the world of functional programming in TypeScript, I find myself contemplating the most idiomatic way to achieve a specific task using libraries like ramda, remeda, or lodash-fp. My goal is to apply a series of functions to a particular dat ...

At what point should you invoke db.close() while utilizing cursor.forEach()?

When working with .toArray(), it is common practice to include db.close() within the callback function. For example: db.collection('grades').find(query).toArray(function(err, docs) { if (err) throw err; console.dir(docs); db.close(); }); ...

When I start scrolling down, the Jumptron background image vanishes

Utilizing bootstrap jumptron with a background image has led to an issue where the background image disappears as I scroll down, leaving only the jumptron div class displaying the heading. How can this be fixed so that the image remains visible even when s ...

How to import a dynamic typescript file in Next JS

As per the NextJs documentation, dynamic import can be used for JavaScript files like const DynamicComponent = dynamic(() => import('../components/hello')). Is it also advisable to use dynamic imports for .tsx files in a similar manner? ...

Are you ready to initiate the object using setInterval?

My Sockjs reconnect method is almost fully functional, except for a small error: (function() { // Initialize the socket & handlers var connectToServer = function() { var warbleSocket = new SockJS('http://url.com:5555/warble'); w ...

What is the best way to connect a value selected in a datepicker to an angular2 model?

I am currently developing an application using Angular 2 and I need to implement a datepicker specifically for Firefox, as other browsers have their own inbuilt datepicker. The issue I am facing is that when I use a datepicker, I lose the two-way binding w ...

Revamp the Twitter button parameters or alter its settings

I'm working on a web page that includes a Twitter button. Before the button, there is an input field and a form where users can easily add relevant hashtags for the page. The goal is to take the text from the input field and populate it in the Twitter ...

Is it possible to create an AngularJS and jQuery Calendar Directive that activates by clicking on a Bootstrap glyphicon?

I have successfully created a directive for my calendar using AngularJS and jQuery. The datepicker pops up when the user selects the input box. Now, I am attempting to allow the user to click on Bootstrap's 'glyphicon glyphicon-calendar' to ...

Simply tap on the image to include it in the HTML5 Canvas drawing

Currently, I am in the process of drawing a circle onto my html5 canvas as shown in the code snippet below: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> &l ...