-2

私はJavaScriptで検証を行っており、フォームを送信するときに各フィールドにフローティングdivを作成する必要があります

フィールドをチェックするために使用blurしていますが、フローティングdivを作成する方法がわかりません

下の図のようになります

誰かがアイデアを持っていますか？

[フィールド1][フロートエラーメッセージ]

[フィールド2][フロートエラーメッセージ]

[フィールド3][フロートエラーメッセージ]

4

3 に答える 3

0

ぼかしたフィールドの後にフローティングdivを追加します

$('input[type=text]').blur(function() {
  // do your validation
  if (error) {
    $('<p>')
      .text('Validation Error: '+error)
      .css('float', 'left')
      .insertAfter(this);
  }
});

私見では、すべてのスタイルをCSSで維持するのが最善です。個人的に「.css（）」呼び出しを「.addClass（）」に置き換えてから、エラーメッセージをフロートさせるスタイルルールを設定します。このアプローチが使用され、フィールドが元々次のようにラップされていた場合：

<div class="field">
  <label>Name:</label>
  <input type="text" name="name" placeholder...>
</div>
<div class="field">
  <label>Email:</label>
  <input type="text" name="email" placeholder...>
</div>
...

次に、検証をクリアするのは次のように簡単です。

$(this).siblings('.validation-error').remove();
于 2013-02-18T06:20:15.977 に答える
0

マークアップやコードを提供していないため、応答のパターンを提供します。これが私がこれを行う方法です。

1.) マークアップにテキスト入力とエラー メッセージを含むフォームを作成します。したがって、マークアップは次のようになります。

<form id="whatever">
<fieldset>
<input type="text" id="1" value=""/><div id="error1">text for error 1</div>
<input type="text" id="2" value=""/><div id="error2">text for error 2</div>
<input type="text" id="3" value=""/><div id="error3">text for error 3</div>
</fieldset>
..
..
</form>

2.) CSS を作成して、テキスト入力を左にフロートさせます。エラー div は、display:none、float:left; として設定できます。これにより、ページの読み込み時にエラー メッセージが非表示になり、適切にフロートするようになります。また、私の哲学は、HTML で HTML を行い、CSS で CSS を行い、JS で JS を行うことです。したがって、jquery で dom を操作するのではなく、ページにマークアップとコンテンツを配置し、css を使用して初期の可視性と配置を処理します。jsでそれを行う必要はありません。

3.) 次に、blur で入力値をチェックするメソッドで、検証でエラーが検出された場合は、対応するエラーを .show() で表示するだけです。次に、ユーザーが入力を修正して検証チェックに合格したら、対応するエラーを .hide() に設定します。

于 2013-02-18T06:32:39.713 に答える
0

テクニックを求めている場合は、フィールド要素の後のインライン要素でうまくいきます。元。

<input type="text" name="firstName"><span>show on error</span><br />
<input type="text" name="lastName"><span>show on error</span><br />
<input type="text" name="empId"><span>show on error</span><br />

これらのエラーを最初に（スタイルを介して）非表示にし、検証時にスクリプトで表示/非表示にします。

if(err_cond_of_elem) 
    $(elem).next().show(); 
else 
    $(elem).next().hide();

編集：

.html()エラーが動的である場合は、JQuery の方法で追加できます

$(elem).next().html(custom_err_message).show();
于 2013-02-18T06:28:30.830 に答える