Question

我有一个表单，我正在尝试验证。我一直在使用id和class来获取元素，但我希望能够在一次传递中获得所有内容。为一个部分而不是另一个部分使用class属性的原因是因为我允许用户添加其他地址信息。我已经发布了以下所有代码。

<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>

这是验证脚本

 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){
        }
    });
});

我希望能够保持相同的功能并允许脚本构建一个大对象。如果需要更多信息，请告诉我。我会尽可能多地提供。

Answer 1

不是单击表单地址按钮时添加的其他表单元素的额外数据

解释更多。

添加了哪些数据（如何在服务器上形成数据？）
如何获取这些数据？
如何将数据附加到表单？
在附加额外数据后（在Web调试器中），表格看起来是什么样的？
似乎success : function (data){ }你什么也没做......

更新

好像你需要在谷歌查询：'jquery reinit dom'
以下是您提出的问题：http://forum.jquery.com/topic/reinitialize-document-ready-after-ajax-and-jquery
指向jquery方法的链接：http://api.jquery.com/live/ 为与当前选择器匹配的所有元素附加事件处理程序，现在和将来 < / LI>
live()方法已被停用，因此使用.on()附加事件处理程序：http://api.jquery.com/on/
代码：

$（ '＃应用形式'）。提交（函数（E）{...

尝试转向：

$（'＃application-form'）。on（'submit'，function（e）{...

使用数据属性进行表单验证而不是获取所有数据

1 个答案:

更新