送信時にメールを検証しようとしています。現在、メールから送信ボタンにタブを移動した場合と、送信ボタンを直接クリックした場合に検証されるように動作しています。ただし、メール フィールド内で Enter キーを押しても検証されません。また、送信をクリックして検証したら、ボタンをもう一度クリックして実際に送信する必要があります。
その理由は、送信入力で type="submit" ではなく type="button" で開始するためです。これは、以前は type="submit" で開始したときに、電子メールが有効かどうかに関係なく送信されたためです。
そこで、type="button" から始めてメールを検証し、有効なメールで type="submit" に変更します。ただし、前述したように、これはまだ最もユーザー フレンドリーではありません (そのままでも機能しますが)。上記のユーザーフレンドリーな機能を追加したいと思います。これが私が持っているコードです(注:検証部分にMailgun jQuery電子メールバリデーターを使用しています):
<form accept-charset="UTF-8" id="icpsignup" name="icpsignup" action="process.php" method="post">
<p>
<input type="text" onfocus="this.value=''" onblur="this.value=!this.value?'Enter name...':this.value;" class="txtbox_index" placeholder="Enter name..." value="Enter name..." name="fields_fname" id="fields_fname">
</p>
<p>
<input type="text" class="txtbox_index" onfocus="this.value=''" onblur="this.value=!this.value?'Enter email...':this.value;" name="fields_email" id="fields_email" Value="Enter email..." placeholder="Enter email...">
<input type="text" style="border: none;color: #fff;cursor: none; background-color:transparent; height:0px;" size="1" value="<?=$country_field;?>" name="fields_country" id="fields_country">
</p>
<div id="status"></div>
<p class="forfree">
<input type="button" value="Signup For Free!" id="validate_submit" class="signupbtn_new" name="submit">
</p>
<input type="hidden" value="<?php echo $paramstring ;?>" name="fields_trk">
</form>
<script src="js/vendor/jquery.js"></script>
<script src="js/mailgun_validator.js"></script>
<script>
// document ready
$(function() {
// capture all enter and do nothing
/* $('#fields_email').keypress(function(e) {
if(e.which == 13) {
$('#fields_email').trigger('focusout');
return false;
}
});
// capture clicks on validate and do nothing
/* $("#validate_submit").click(function() {
return false;
});*/
// attach jquery plugin to validate address
$('#fields_email').mailgun_validator({
api_key: 'pubkey-8s-e-ovj0nbi32xw5eeyibrmv-lkq2e2', // replace this with your Mailgun public API key
in_progress: validation_in_progress,
success: validation_success,
error: validation_error,
});
});
// while the lookup is performing
function validation_in_progress() {
$('#status').html("<img src='images/loading.gif' height='16'/>");
}
// if email successfull validated
function validation_success(data) {
$('#status').html(get_suggestion_str(data['is_valid'], data['did_you_mean']));
}
// if email is invalid
function validation_error(error_message) {
$('#status').html(error_message);
}
// suggest a valid email
submitHandler: function(form) {
function get_suggestion_str(is_valid, alternate) {
if (alternate) {
form.preventDefault();
return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
} else if (is_valid) {
form.submit();
//return '<span class="success">Address is valid.</span>';
} else {
form.preventDefault();
return '<span class="error">Address is invalid.</span>';
}
}
}
// Submithandler を使用しようとする別のバージョン。検証を使用する必要があるかどうかはわかりません。:
$(function() {
$("#icpsignup").validate({
submitHandler: function('icpsignup') {
function get_suggestion_str(is_valid, alternate) {
if (alternate) {
icpsignup.preventDefault();
return '<span class="warning">Did you mean <em>' + alternate + '</em>?</span>';
} else if (is_valid) {
icpsignup.submit();
//return '<span class="success">Address is valid.</span>';
} else {
icpsignup.preventDefault();
return '<span class="error">Address is invalid.</span>';
}
}}
})
})
</script>