Form validation using data attribute not grabbing all data

Question

I have a form that I am trying to validate. I have been using the id and the class to get the element but I would like to be able to get everything in one pass through. The reason for using the class attribute for one section and not another is because I allow the user to add additional address information. I have posted all the code below.

<form role='form' id='application-form'>
    <div class='h2div'><h2 data-toggle='#general-information' data-active='general-information'>General Information</h2></div>
    <div class='appdiv' id='general-information'>
        <div class='form-group row'>
            <div class='col-md-3 col-sm-6 col-xs-12'>
                <label class='control-label'>First Name<span class='req'> *</span></label>
                <input type='text' class='form-control not-empty first_name' id='first_name' value="<?=$first_name?>" data-name='first_name'/>
            </div>
            <div class='col-md-3 col-sm-6 col-xs-12'>
                <label class='control-label'>Middle Name</label>
                <input type='text' class='form-control middle_name' id='middle_name' value="<?=$middle_name?>" data-name='middle_name'/>
            </div>
            <div class='col-md-3 col-sm-6 col-xs-12'>
                <label class='control-label'>Last Name<span class='req'> *</span></label>
                <input type='text' class='form-control not-empty last_name' id='last_name' value="<?=$last_name?>" data-name='last_name'/>
            </div>
            <div class='col-md-3 col-sm-6 col-xs-12'>
                <label class='control-label'>Suffix</label>
                <input type='text' class='form-control suffix' id='suffix' placeholder='e.x. Jr., Sr., ...' value="<?=$suffix?>" data-name='suffix'/>
            </div>
        </div>
    </div>
    <div class='h2div'><h2 data-toggle='#address-records' data-active='address-records'>Address Records</h2></div>
    <div class='appdiv' id='address-records'>
        <div class='address-form'>
            <div class='form-group row'>
                <div class='col-md-3 col-sm-6 col-xs-12'>
                    <label class='control-label'>City<span class='req'> *</span></label>
                    <input type='text' class='form-control city not-empty' placeholder='city' data-name="city"/>
                </div>
                <div class='col-md-3 col-sm-6 col-xs-12'>
                    <label class='control-label'>State<span class='req'> *</span></label>
                    <select class='form-control state not-empty' data-name="state">
                        <option value="" selected>-- State --</option>
                    </select>
                </div>
                <div class='col-md-3 col-sm-6 col-xs-12'>
                    <label class='control-label'>Zip Code<span class='req'> *</span></label>
                    <input type='text' class='form-control zip not-empty' placeholder='#####' data-name="zip"/>
                </div>
            </div>
        </div>
        <div class='form-group row'>
            <div class='col-md-12'>
                <a href="" id="add_address">Add Another Address</a>
            </div>
        </div>
    </div>
</form>

Here is the validation script

 var sections = ["general-information", "address-records", "employment-history", "driving-experience", "military-experience", "self-identification", "psp-notice", "eva-section"]; //array that houses the id tags of the application sections
$('#application-form').submit(function(e){
    e.preventDefault(); //stop the form from the default submission
    var application_info = new Object(); //start the application form Object
    //run through each section and gather info 
    for(var i = 0; i < sections.length; i++){
        application_info[sections[i]] = new Object(); //create a new object for each section
        //traverse each select by form control 
        $("#"+sections[i]).find(".form-control").map(function (index, element){
            $(element).each(function (index){
                //application_info 
                application_info[sections[i]][$(element).data('name')] = $('.'+$(element).data('name')).eq(index).val();
            });
        }).get();
    }
    $.ajax({
        url: '../assets/server/application_process.php',
        type : 'post',
        data : application_info,
        dataType : 'JSON',
        success : function (data){
        }
    });
});

I would like to be able to keep the same functionality and allow the script to build one large object. Please let me know if more information is needed. I will provide as much as possible.

Answer 1

not the extra data from the additional form elements that are added when the form address button is clicked

Explain more.

• What data are added (how data are formed on server)?
• How are these data fetched ?
• how data are appended to form?
• What the form looks like right after appending additional data (in web debugger)?
• Seems in success : function (data){ } you do nothing...

Update

1. Seems like you need to query in google: 'jquery reinit dom'
2. Here goes the distilled question like yours: http://forum.jquery.com/topic/reinitialize-document-ready-after-ajax-and-jquery
3. And the link to jquery method: http://api.jquery.com/live/ that would Attach an event handler for all elements which match the current selector, now and in the future
4. The live() method is depricated, so Use .on() to attach event handlers : http://api.jquery.com/on/

5. Code:

   $('#application-form').submit(function(e){...

   try to turn to:

   $('#application-form').on('submit', function(e){ ...