Question

我正在构建一个响应式表单并使用css媒体查询根据屏幕宽度更新布局。

在桌面视图和移动设备之间平板电脑视图，表单的设计更改为标签元素位于桌面宽度的输入字段顶部，但随后在屏幕缩小到移动宽度时成为默认输入字段值。

我正在运行以下函数将标签中的文本作为输入字段的值： HTML：

    <div class="sectionHeader" id="updateDetails">My details <span class="sectionEdit">Edit</span></div>
        <div class="sectionWrapper" id="myDetails">
            <div class="formSection clearfix">
                <fieldset>
                    <legend>Personal</legend>
                        <div class="ctrlHolder">
                            <div class="ctrlHolder">
                                <label class="hiddenLabel" for="givenName">Given name</label>
                                <input name="givenName" id="givenName" type="text" class="text long required"/>
                            </div>
                            <div class="ctrlHolder">
                                <label class="hiddenLabel" for="familyName">Family name</label>
                                <input name="familyName" id="familyName" type="text" class="text long required"/>
                            </div>
                        </div>
                </fieldset>
            </div>
        </div>
<div class="formSectionFooter clearfix">
    <input data-target="myInvestment" class="sectionNavigator button secondary" id="sectionDetailsNext" name="sectionDetailsNext" type="button" value="Continue"/>
            </div>


$('#details .formSection fieldset .ctrlHolder label').each(function(){
   //console.log($(this).text());
   $(this).addClass('hiddenLabel');
   $(this).next('input').val($(this).text());
});
}

这对我的客户端验证造成了严重破坏，因为字段正在进行空白测试，并且它们变得已满且默认值出错。除其他外，验证检查空字段或默认值（例如“选择”，“名字”等）

$('.sectionNavigator').click(function(event){
    //$(this).closest('.formSection').validate();
    validateMy.form();
    event.preventDefault();

    // check for any empty fields in the preceding section
var $thisFormSection = $(this).closest('.formSection');
var $elementsWithErros = $thisFormSection.find('input[value=""]:visible, input[class="error"]:visible, select[value="Day"]:visible, select[value="Month"]:visible, select[value="Year"]:visible, select[value="Select"]:visible, select[value="Please select"]:visible, select[value="Given name"]:visible, select[value="Family name"]:visible');
var target = $(this).attr('data-target');

有没有人对如何处理此问题有任何建议？

Answer 1

因此，如果字段具有默认值并且尚未由用户编辑，那么基本上您希望该字段被视为“空”。

首先，您可以使用placeholder属性，而不是设置val。它现在是supported by most of the mobile browsers，不应该反对您的验证。对于不受支持的情况 - 如果您要使用此路线，请确保仅执行此操作in browsers where it's not supported - 您可以跟踪已编辑的字段。执行验证时，如果字段已已编辑并且是默认值，那么这是一个错误。否则你可以假设它是空的。

只是想说，我认为验证（'没有默认值'）是不必要的，特别是因为你在谈论移动设备而且执行这种逻辑的额外成本可能是不值得的。

响应式jquery验证问题

1 个答案: