入力する3つのフィールド、名、姓、および電子メールアドレスを含むフォームがあります。
要素はすべて、電子メール アドレス用に取得した次の要素に似ています。
<dl>
<dt>
<label for="Email_Address">Email Address</label>
</dt>
<dd style="float:right">
<input type="text" id="Email_Address" class="required email" name="Email_Address" />
<br>
<span class="form_error" id="email_error">
<span id="email_msg"></span>
</span>
</dd>
</dl>
その下のスパン、クラス「form_error」は、検証エラーを表示している場所です。検証コードはすべて正常に機能し、有効な電子メール アドレスのチェックなどを行います。次に、その電子メール アドレスが既にファイルに登録されているかどうかを確認し、存在する場合はメッセージも表示する AJAX 検証を導入しようと考えました。 . それはすべて問題ありません。問題は、誰かが既に登録されている電子メール アドレスを入力すると、「電子メールは既に登録されています」というメッセージが表示されることです。次に、フォームのメールアドレスを変更しようとすると、検証エラーが表示されますが、「既にファイルに登録されています」というメッセージを消去する方法がわかりません。empty()
、 、および他のいくつかを使用してみましreplaceWith()
たが、うまくいかないようです。
AJAX 呼び出しを使用した検証コードを次に示します。簡単なことだと思いますが、私はまだこれらすべての専門家ではありません。
$(document).ready(function(){
$("#LegalVita_Sign_Up").validate({
submitHandler: function(form) {
var isDup = false;
$.ajax({
url: 'dup_email.php',
data: { email: $('#Email_Address').val() },
async: false,
success: function(msg) {
isDup = msg === "1" ? true : false
},
});
if (isDup) {
error = 'duplicate email address: ' + $('#Email_Address').val();
$('#email_msg').replaceWith(error);
return false;
} else {
form.submit();
return true;
}
},
messages: {
First_Name: " First name required",
Last_Name: " Last name required",
Email_Address: {
required: " email required",
email: " email must be of the format: 'name@domain.com'"
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "First_Name" )
error.insertBefore("#first_msg");
else if (element.attr("name") == "Last_Name" )
error.insertBefore("#last_msg");
else if (element.attr("name") == "Email_Address" ) {
error.insertBefore("#email_msg");
} else
error.insertAfter(element);
},
});
});