0

我正在构建一个响应式表单并使用 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');

有人对如何解决这个问题有任何建议吗？

4

1 回答 1

2

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

首先，您可以使用placeholder属性而不是设置val. 现在大多数移动浏览器都支持它，并且不应该反对您的验证。对于不受支持的情况——如果你打算走这条路，请确保你只在不受支持的浏览器中执行此操作——你可以跟踪哪些字段已被编辑。在执行验证时，如果某个字段已被编辑并且是默认值，那么这是一个错误。否则你可以假设它是空的。

只想说，我认为验证（'无默认值'）是不必要的，特别是因为您正在谈论移动设备并且执行此逻辑的额外成本可能只是不值得。

于 2013-02-19T21:33:50.267 回答