クライアント側でフィールドを検証し、フィールドの横にそれぞれの警告を表示しようとしても問題ありません。
<div class="formblock">
<label class="screen-reader-text">Email</label>
<input type="text" name="email" {if $smarty.session.email} value={$smarty.session.email} disabled {/if} id="email" class="txt requiredField email" placeholder="Email:"/>
</div>
<div class="formblock">
<label class="screen-reader-text">Message</label>
<textarea name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:"></textarea>
</div>
たとえば、それらが空であることを確認するには、.each を使用し、すべてのフィールドに対してこれを確認し、そのspan
隣に a を追加します。
$('.requiredField').each(function () {
if ($.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter a ' + labelText + '.</span>');
$(this).addClass('inputError');
hasError = true;
}
});
ただし、サーバー側では、私が通常行う方法は、各フィールドの検証を実行し、エラーメッセージを var として追加し ($ERRORTEXT
その場合)、最後にエコーを実行し、ajax の成功後にこれを一番上に表示することです形。
$ERRORTEXT .= " <li> Name has to contain more than two characters </li> ";
if ($error)
{
echo $ERRORTEXT;
}
フィールドごとにこれを行うにはどうすればよいですか (クライアント側で行うことと同様)、それらの隣のスパンに戻すにはどうすればよいですか? echo で 1 つの var を返す代わりに、おそらく json の結果を返してからこれを処理する必要があると思いますか?