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 に答える