移动设备上的表单错误，而不是台式机

Question

我发现我的 html 表单存在一个无法调试的错误。我已经两次更改了表单的格式，但在这方面没有任何帮助。如果您想查看表单本身如何位于http://driveforeagle.com/apply/page2/

请注意，您需要访问该链接才能了解我所引用的内容以及下面对我的代码的引用。

虫子

仅在移动设备上（不区分设备类型），当您进入“驾驶体验”部分时，“交通引用历史”和“驾驶执照历史”两个子部分；这两个小节中的输入字段不可点击，也无法填写。几乎就像有某种浮动部分，但我无法找到这个浮动部分的来源。

驾驶体验部分

<article class='panel panel-danger'>
    <header class='panel-heading' role='tab' id='drivingExperienceHeading'>
        <h4 class='panel-title'>
            <a class='collapsed' role='button' data-toggle='collapse' data-parent='#panelMenu' href='#drivingExperience' aria-expanded='false' aria-controls='drivingExperience'> 
            Driving Experience
            </a>
            <span class='glyphicon glyphicon-remove pull-right'></span>
        </h4>
    </header>
    <div id='drivingExperience' class='panel-collapse collapse' role='tabpanel' aria-labelledby='drivingExperienceHeading'>
        <main class='panel-body'>
            <? require_once 'sections/driving_experience.php'; ?>
        </main>
    </div>
</article>

require_once 'sections/driving_experience.php'

<article class='col-xs-12'>
<h5><strong>List all driving experience for the past 10 years</strong></h5>
</article>
<article class='col-xs-12'>
    <h4>Tractor Trailer Experience</h4>
</article>
<section class='clearfix'></section>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>From</label>
    <input type='text' class='form-control addr-date' id='tt-from-date' name='tt-from-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>To</label>
    <input type='text' class='form-control addr-date' id='tt-to-date' name='tt-to-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>Approximate Miles</label>
    <input type='text' class='form-control' name='tt-miles' id='tt-miles' data-validator='notEmpty|isNumber'/>
</article>
<article class='col-xs-12'>
    <hr />
    <h4>Straight Truck Experience</h4>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
            <input type="checkbox" name="st_exp"/> No Straight-Truck Experience
        </label>
    </section>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>From</label>
    <input type='text' class='form-control addr-date' id='st-from-date' name='st-from-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>To</label>
    <input type='text' class='form-control addr-date' id='st-to-date' name='st-to-date' data-validator='notEmpty|isDateMMYYYY'/>
</article>
<article class='form-group col-md-3 col-sm-6 col-xs-12'>
    <label class='control-label req'>Approximate Miles</label>
    <input type='text' class='form-control not-empty' id='st-miles' name='st-miles' data-validator='notEmpty|isNumber'/>
</article>
<article class='col-xs-12'>
    <hr />
    <h4>Accident History</h4>
</article>
<article class='col-xs-12'>
    <h5><strong>List all accident records for the past 5 years regardless of fault.</strong></h5>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
        <input type="checkbox" name="no_accidents" />No Accident History
        </label>
    </section>
</article>
<section id='accident-holder'>
    <article class='accident-form last'>
        <section class='form-group col-md-2 col-sm-6 col-xs-12'>
            <label class='control-label req'>Date</label>
            <input type='text' class='form-control addr-date accident-date' name='accident-date' data-validator='notEmpty|isDateUS'/>
        </section>
        <section class='form-group col-md-3 col-sm6 col-xs-12'>
            <label class='control-label req'>Nature</label>
            <input type='text' class='form-control nature' name="nature" data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Location</label>
            <input type='text' class='form-control location' name='location' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-2 col-sm-6 col-xs-6'>
            <label class='control-label req'>No. of Fatalities</label>
            <input type='tel' class='form-control fatalities' name='fatalities' data-validator='notEmpty|isNumber'>
        </section>
        <section class='form-group col-md-2 col-sm-6 col-xs-6'>
            <label class='control-label req'>No. of Injuries</label>
            <input type='tel' class='form-control injuries' name='injuries' data-validator='notEmpty|isNumber'>
        </section>
    </article>
</section>
<section class='clearfix'></section>
<article class='form-group col-md-12'>
    <a href="" id="add_accident">Add Another Accident Record</a>
</article>
<!-- BEGIN TRAFFIC CITATION HISTORY -->
<article class='col-xs-12'>
    <hr />
    <h4>Traffic Citation History</h4>
</article>
<article class='col-xs-12'>
    <h5>
        <strong>List all traffic citations, convictions, supervision and forfeitures for the last 5 years (other than parking).</strong>
    </h5>
</article>
<article class='form-group col-xs-12'>
    <section class='checkbox'>
        <label> 
        <input type="checkbox" name="no_citations" />No Citations
        </label>
    </section>
</article>
<section id='traffic-holder'>
    <article class='traffic-citation-form last'>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Location</label>
            <input type='text' class='form-control citation-location' name='citation-location' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Date</label>
            <input type='text' class='form-control addr-date citation-date' name='citation-date' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Charge</label>
            <input type='text' class='form-control charge' name='charge' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Penalty</label>
            <input type='text' class='form-control penalty' name='penalty' data-validator='notEmpty'/>
        </section>
    </article>
</section>
<article class='col-md-12'>
    <a href="" id="add_citation">Add Another Traffic Citation Record</a>
</article>
    <!-- BEGIN DRIVER LICENSE HISTORY -->
<article class='col-xs-12'>
    <hr />
    <h4>Driver's License History</h4>
</article>
<article class='col-xs-12'>
    <h5>
        <strong>List every driver's license held in the past 3 years</strong>
    </h5>
</article>
<section id='license-holder'>
    <article class='license-form last'>
        <section class='form-group col-md-1 col-sm-3 col-xs-12'>
            <label class='control-label req'>State</label>
            <input type='text' class='form-control license_state' name='license_state' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>License No.</label>
            <input type='text' class='form-control license_no' name='license_no' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-1 col-sm-3 col-xs-12'>
            <label class='control-label req'>Type</label>
            <input type='text' class='form-control license_type' name='license_type' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-4 col-sm-6 col-xs-12'>
            <label class='control-label req'>Endorsements</label>
            <input type='text' class='form-control endorsements' name='endorsements' data-validator='notEmpty'/>
        </section>
        <section class='form-group col-md-3 col-sm-6 col-xs-12'>
            <label class='control-label req'>Exp. Date</label>
            <input type='text' class='form-control addr-date license_date' name='license_date' data-validator='notEmpty|isDateMMYYYY'/>
        </section>
    </article>
</section>
<section class='col-md-12'>
    <a href='' id='add_license'>Add Another Driver's License</a>
</section>
<section class='form-group col-xs-12'>
    <hr />
    <label class='control-label radio req'>
        A. Have you ever been denied a license, permit or privilege to operate a motor vehicle?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qa' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qa' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label'>If "Yes" please explain:</label>
    <textarea rows='5' id='qa-explain'  name='qa_explain' class='form-control' readonly></textarea>
</section>
<section class='form-group col-xs-12'>  
    <label class='control-label radio req'>
        B. Has any license, permit or privilege ever been suspended or revoked?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qb' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qb' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label'>If "Yes" please explain:</label>
    <textarea rows='5' id='qb-explain' name='qb_explain' class='form-control' readonly></textarea>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label radio req'>
        C. Have you ever tested positive or refused a test, on any pre-employment drug or alchohol test administered by an employer to which you applied, but did not obtain safety-sensitive transportation work covered by DOT agency drug and alcohol testing rules during the past two years?
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qc' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qc' value='-1'> No
    </label>
</section>
<section class='form-group col-xs-12'>
    <label class='control-label radio'>
        If "Yes", can you provide documentation that you successfully passed then returned to work?
    </label>
    <label class='radio-inline'>
        <input type='radio' class='' name='qc_explain' value='1' disabled> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class='' name='qc_explain' value='-1' disabled> No
    </label>
</section>
<section class='col-xs-12 form-group'>
    <label class='control-label radio'>
        D. Have you ever been denied access to the mail, or had your postal badge revoked?<span class='req'> *</span>
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qd' value='1' data-validator='groupNotEmpty'> Yes
    </label>
    <label class='radio-inline'>
        <input type='radio' class="radio-check" name='qd' value='-1'> No
    </label>
</section>
<section class='clearfix'></section>

对于第二个文件的长度，我深表歉意，但我添加了整个部分，以确保所有代码都在那里进行分析。我再次发现表单本身没有任何异常，我找不到任何丢失的标签、未闭合的标签或类似的东西，所以这又没有多大意义。

另一方面，我也确实使用了一些 javascript 来操作表单，因为用户可以添加另一条信息，因此它会克隆表单。我不确定这是否对它有一些影响，但是一开始不存在克隆形式，所以我假设它不存在。无论如何，我都会将其包括在内以完成。

Javascript 示例

 //generate an object of data to consolidate the amount of further coding needed

var multisections = {
'address' : [
    "#add_address",
    "#address-holder",
    ".address-form"
],
'employment' : [
    "#add_employment",
    "#employment-holder",
    ".employment-form"
],
'accident' : [
    "#add_accident",
    "#accident-holder",
    ".accident-form"
],
'citation' : [
    "#add_citation",
    "#traffic-holder",
    ".traffic-citation-form"
],
'license' : [
    "#add_license",
    "#license-holder",
    ".license-form"
]
};


$.each(multisections, function(i, e){
   $(e[0]).on('click', function(event){
    event.preventDefault();
    var parentEl = $(e[1]);
    var lastForm = $.makeArray($(parentEl).find('.last'));  

    var currF = $(lastForm).find('input[name*="fmscr_"]:checked').val();
    var currD = $(lastForm).find('input[name*="drug_testing_"]:checked').val();
    var lastFmscr = $(lastForm).find('input[name*="fmscr_"]').attr('name');
    var lastDrug = $(lastForm).find('input[name*="drug_testing_"]').attr('name');
    var newForm = $(lastForm).clone(true);
    $(newForm).addClass('last replica');
    $(newForm).find('.delete-record').remove();
    $(newForm).prepend('<div class="col-xs-12"><button class="delete-record btn btn-warning pull-right" value="delete">&times</button></div>');
    $(newForm).insertAfter(lastForm);
    $(lastForm).removeClass('last');   
    var i;
   if(e[1] == "#employment_history"){ 

        i = lastFmscr.substr(lastFmscr.length -1); //get the current count
        i = parseInt(i); //turn it to an int
        i++; //increase the count          
        $(newForm).find('input[name="fmscr_'+(i-1)+'"]').attr('name', 'fmscr_'+i);
        $(newForm).find('input[name="drug_testing_'+(i-1)+'"]').attr('name', 'drug_testing_'+i);

    }
    $(newForm).find('input:not([type=radio]), select').val("");
    $(lastForm).find('input[name*="fmscr_"][value='+currF+']').prop('checked', true);
    $(lastForm).find('input[name*="drug_testing_"][value='+currD+']').prop('checked', true);   
    $(newForm).find('input[name="fmscr_'+i+'"]').prop('checked', false);
    $(newForm).find('input[name="drug_testing_'+i+'"]').prop('checked', false);
    newForm.find('.addr-date').each(function(){
        $(this).removeAttr('id').removeClass('hasDatepicker');
        $('.addr-date').datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'mm/yy',
            onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
                validator('#applicationForm');
                checkHeadings();
            }
        });

    });
    validator('#applicationForm');
    checkHeadings();
});
$(e[2]).on('click', '.delete-record', function(event){
    event.preventDefault();
    $(this).closest(e[2]).prev().addClass('last')
    $(this).closest('.replica').remove();
    validator('#applicationForm');
    checkHeadings();
});
});

如果有人想进一步了解有关代码的任何其他内容，请告诉我，我会尽快给您！提前感谢您提供的所有帮助。

Answer 1

您之前错过了<section class="clearfix"></section>

<article class="col-md-12"> <a href="" id="add_citation">Add Another Traffic Citation Record</a> </article>

部分，和之前一样

<section class="col-md-12"> <a href="" id="add_license">Add Another Driver's License</a> </section>

使用 Firebug 或类似工具，右键单击不可点击的输入字段和“检查元素”，它会将您带到错误元素，该链接覆盖了整个表单。

原因需要更多研究......据我了解，问题是你所有的 col-*-* 东西都是 float: left; 所以他们不会让他们的容器更大，高度保持为 0。<article>包含添加交通引用或驾驶执照的链接的元素在大屏幕上也是float: left;，但不会在小屏幕上浮动。

不是 100% 确定这一点，但由于它不是浮点数，它至少需要与之前的元素一样大才能放置在它们之后，并且它涵盖了前面的部分（代码后面的元素将涵盖前面的元素）。浮动通常需要清除，以避免奇怪的事情......