Array input validation help

I am working on this application which i need to achieve something like this, in the system we are allowing the system administrator to add customers and their vehicles,

Customers can have one or more vehicles, by default there are 8 fields to add the information of customer's vehicle.


here are the fields for first entry. 

Code:

<input type="text" name="number[0]" id="number" class="form-control name_list"/>

<input type="text" name="make[0]" id="make"  class="form-control name_list" />

<input type="text" name="model[0]" placeholder="" class="form-control name_list" />

<input type="text" name="chassis[0]" placeholder="" class="form-control name_list" />

<input type="text" name="engine_no[0]" placeholder="" class="form-control name_list" />

<input type="text" name="color[0]" placeholder="" class="form-control name_list" />

<input type="text" name="tyre[0]" placeholder="" class="form-control name_list" />

<input type="text" name="battery[0]" placeholder="" class="form-control name_list" />

and my interface is like this.


by clicking "Add another" user will get another set of same fields (same 8 default fields ) field names  of this set will be  like with array[1]

Code:

<input type="text" name="number[1]" id="number" class="form-control name_list"/>

<input type="text" name="make[1]" id="make"  class="form-control name_list" />

.......

note that the index of the array changes with the each vehicle, if a person have 5 vehicles then the number field will be like number[0],number[1], number[2], number[3], number[4], number[5] same will be for other 7 fields.

i am using following jquery  & codeigniter validation rules for validation.

here's my jquery script.

Code:

$( document ).ready(function() {

$('#form-user').submit(function(e) {
        e.preventDefault();

        var me = $(this);

        // perform ajax
        $.ajax({
            url: me.attr('action'),
            type: 'post',
            data: me.serialize(),
            dataType: 'json',
            success: function(response) {
                if (response.success == true) {
                    // if success we would show message
                    // and also remove the error class
                
                    $('.form-group').removeClass('has-error')
                                    .removeClass('has-success');
                    $('.text-danger').remove();

                    // reset the form
                    me[0].reset();
                    window.location.href = "customers";

                    // close the message after seconds
                    $('.alert-success').delay(500).show(10, function() {
                        $(this).delay(3000).hide(10, function() {
                            $(this).remove();
                            //window.location.href = "http://localhost/motorlinknew/customers";
                        });
                    })
                }
                else {
                    $.each(response.messages, function(key, value) {
                        var element = $('#' + key);
                        
                        element.closest('div.form-group')
                        .removeClass('has-error')
                        .addClass(value.length > 0 ? 'has-error' : 'has-success')
                        .find('.text-danger')
                        .remove();
                        
                        element.after(value);
                    });
                }
            }
        });
    });

});

this script validates the page without refreshing the page. thing is with this script the input fields name & id attributes has to be the same.

ex: name="number[0]" id="number[b][0]" [/b]

but

when use [b]name="number[0]" id="number[b][0]" [/b][/b]  the validations not working. 

even i tired 

$this->form_validation->set_rules('number[]', 'Number', 'required|min_length[7]');
[b]$this->form_validation->set_rules('number[0]', 'Number', 'required|min_length[7]');[/b]

[b]no luck.[/b]

please help me here. i have a deadline to meet. all i need is validate first basic 8 fields and the ones users adding using "Add another" button

My first instinct would be that, if you're using AJAX to submit the form anyway, why use an array for the field names? Just create a new form for each vehicle. Names only have to be unique in the form, not on the page (id values have to be unique on the page, but you can use a counter to make the id values unique if you need them in your script).

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

My first instinct would be that, if you're using AJAX to submit the form anyway, why use an array for the field names? Just create a new form for each vehicle. Names only have to be unique in the form, not on the page (id values have to be unique on the page, but you can use a counter to make the id values unique if you need them in your script).

I use ajax because, to keep vehicles being disappear due to page refresh, think of a situation a user has multiple vehicles then if there's an error in a field of a one vehicle once a user submit the form only the default vehicle fields will remains & others will disappear due to the page refresh.

suggestions are welcome now i am stuck with this like for 1 week

Hi,

I think the way you are trying to do it is going to be difficult anyway, because if you want to show the individual form error messages you will have to do it via js updating the individual message fields. Which means detecting the individual errors and identifying who they are for, which is going to be a very complex js response decoding.

I would suggest doing this via a multi step form, or having all your fields perhaps in tabs labelled vehicle 1, vehicle 2 etc. with vehicle 2 and above being optional. Alternatively you can have two submit buttons, one for save vehicle and add another or save vehicle and finish. Or have a screen showing vehicles submitted so far, with a button for adding a vehicle (like addresses in an address book).

Alternatively, inserting this sort of code via javascript, means you can also update a hidden field indicating how many vehicles have been selected, by incrementing the hidden form value. So when you sumbit it, you know how many vehicles you are expecting.

Or, have all the fields for all 5 vehicles in the form, but put the four optional ones in divs set as display none. Then a simple piece of js could remove the style one by one until all five are required. In that way you are submitting the entire form every time, except that only the required vehicles are being validated. Again when you show the form your controller will set how many to show by default.

There are so many ways to do this, it really depends on how you want the UI to behave. For ease of identifying fields, just make sure they all have a unique name, so you have vehicle_name_1, vehicle_name_2 etc. The only reason the script you are basing this on is doing them as array names is for ease of collecting the data via js, not for the ease of implementing error messages upon ajax response.

What it appears that you are struggling with is the way the script you have chosen has been written. Since this is relatively straight forward to do from scratch with JS, perhaps you could write your own version to do the same thing but name all the fields more appropriately.

Sorry if that is not much help,

Paul.

PS you may want to issue a deadline may be missed warning to whoever your deadline is with. Or if it is just you said "I will have it done by wednesday", let them know it is taking longer than expected. I find blaming IE bugs is quite handy for this kind of situation :-)

Hi,

I think the way you are trying to do it is going to be difficult anyway, because if you want to show the individual form error messages you will have to do it via js updating the individual message fields. Which means detecting the individual errors and identifying who they are for, which is going to be a very complex js response decoding.

I would suggest doing this via a multi step form, or having all your fields perhaps in tabs labelled vehicle 1, vehicle 2 etc. with vehicle 2 and above being optional. Alternatively you can have two submit buttons, one for save vehicle and add another or save vehicle and finish. Or have a screen showing vehicles submitted so far, with a button for adding a vehicle (like addresses in an address book).

Alternatively, inserting this sort of code via javascript, means you can also update a hidden field indicating how many vehicles have been selected, by incrementing the hidden form value. So when you sumbit it, you know how many vehicles you are expecting.

Or, have all the fields for all 5 vehicles in the form, but put the four optional ones in divs set as display none. Then a simple piece of js could remove the style one by one until all five are required. In that way you are submitting the entire form every time, except that only the required vehicles are being validated. Again when you show the form your controller will set how many to show by default.

There are so many ways to do this, it really depends on how you want the UI to behave. For ease of identifying fields, just make sure they all have a unique name, so you have vehicle_name_1, vehicle_name_2 etc. The only reason the script you are basing this on is doing them as array names is for ease of collecting the data via js, not for the ease of implementing error messages upon ajax response.

What it appears that you are struggling with is the way the script you have chosen has been written. Since this is relatively straight forward to do from scratch with JS, perhaps you could write your own version to do the same thing but name all the fields more appropriately.

Sorry if that is not much help,

Paul.

PS you may want to issue a deadline may be missed warning to whoever your deadline is with. Or if it is just you said "I will have it done by wednesday", let them know it is taking longer than expected. I find blaming IE bugs is quite handy for this kind of situation :-)

Thanks Paul. the thing is there is no fix amount of vehicles, think person "X" have only 1 vehicle then there is person "Y" whom own 2 or more  my clients requirment is there should be an option to add multiple vehicles for a single person. that's why i choose the way i described in the main post.    

Thanks for the suggestions, i really don't know what to do.....

My first instinct would be that, if you're using AJAX to submit the form anyway, why use an array for the field names? Just create a new form for each vehicle. Names only have to be unique in the form, not on the page (id values have to be unique on the page, but you can use a counter to make the id values unique if you need them in your script).

I use ajax because, to keep vehicles being disappear due to page refresh, think of a situation a user has multiple vehicles then if there's an error in a field of a one vehicle once a user submit the form only the default vehicle fields will remains & others will disappear due to the page refresh.

suggestions are welcome now i am stuck with this like for 1 week

None of this requires AJAX, but I'm not suggesting that you ditch AJAX, I'm just suggesting that you use multiple forms on the page instead of adding fields to the same form. Instead of processing the person and X number of vehicles, you can process the person as one form and each vehicle as an individual form. Whenever you need to add the fields for another vehicle to the page, you add a new vehicle form instead of adding a collection of fields for a new vehicle to the existing form.

You may have to add one or two hidden fields to each form to track the associated user, but it should be a lot simpler to process each vehicle as an individual form than to process the user and all of their vehicles every time the user adds a new vehicle.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

any sugesstions

My first instinct would be that, if you're using AJAX to submit the form anyway, why use an array for the field names? Just create a new form for each vehicle. Names only have to be unique in the form, not on the page (id values have to be unique on the page, but you can use a counter to make the id values unique if you need them in your script).

I use ajax because, to keep vehicles being disappear due to page refresh, think of a situation a user has multiple vehicles then if there's an error in a field of a one vehicle once a user submit the form only the default vehicle fields will remains & others will disappear due to the page refresh.

suggestions are welcome now i am stuck with this like for 1 week

None of this requires AJAX, but I'm not suggesting that you ditch AJAX, I'm just suggesting that you use multiple forms on the page instead of adding fields to the same form. Instead of processing the person and X number of vehicles, you can process the person as one form and each vehicle as an individual form. Whenever you need to add the fields for another vehicle to the page, you add a new vehicle form instead of adding a collection of fields for a new vehicle to the existing form.

You may have to add one or two hidden fields to each form to track the associated user, but it should be a lot simpler to process each vehicle as an individual form than to process the user and all of their vehicles every time the user adds a new vehicle.

you mean something like this right

http://tristandenyer.com/demos/dynamic-f...p-3-0.html

you mean something like this right

http://tristandenyer.com/demos/dynamic-f...p-3-0.html

No, that's what I assumed you were doing already, based on how you described your problem. That is just adding new fields to an existing form, while I was suggesting adding new forms to the page.

Bonfire

Practical CodeIgniter 3
CodeIgniter Testing Guide

A slightly different approach to displaying and editing the vehicle info could simplify thing a lot. Instead of putting multiple editable vehicle forms on the customer page simply list the available info for each vehicle as static text. With each listing associate an "Edit" button. That button redirects to a page with the form populated with the associated data.

In addition to the "Submit" button, the form might contain a "cancel" link that would return the user to the customer page (as would the browser's back button).

Assuming a submit succeeds, the browser redirects to the customer page again where the new information will be displayed.

The "Add Another" (or maybe more appropriately "Add Vehicle") button on the customer page redirects to an empty form.

Data acquisition, field validation and view designs are greatly simplified using this approach.

Such an interface could be created without using any javascript although it does not preclude it if, for instance, you want to do client side field validation or get fancy and open the editing form in a modal dialog.

A good example of this approach can be found on the Amazon website for account management.