0
GoogleのRecaptchaを使用するフォームにユーザーが再入力することで、確認するにはメールアドレスが必要です。私はこれに次のコードを使用していますが、動作していません。私が得意でないのは、入力された電子メールアドレスが互いに一致しないというメッセージです。電子メールアドレスが互いに等しくない場合、私はこれを示すメッセージを期待しています。再入力してメールを確認していますか？
email: {
required: true,
email: true,
minlength: 4
},
email_again: {
equalTo: '#email'
},
誰でも助けてください。
他のもの：ユーザーがMrまたはMsのラジオボタンの1つにチェックマークを付けるのを忘れた場合、メッセージが表示されますが、これは必須ですが、ラジオボタンは消えています。
autosize(document.querySelectorAll('#message_content'));
var validator = $("#comment_form").validate({
ignore: [],
rules: {
gender: {
required: true,
},
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true,
\t \t \t minlength: 4
},
email_again: {
\t \t equalTo: '#email'
\t \t },
message_subject: {
required: true,
\t \t \t minlength: 2
},
message: {
required: true,
\t \t \t minlength: 4
},
hiddenRecaptcha: {
required: function() {
if (grecaptcha.getResponse() == '') {
return true;
} else {
return false;
}
}
}
}
});html{
\t \t text-align:center
\t \t }
\t \t
body {
display: inline-block;
margin: 0px auto;
text-align:left;
}
\t #comment_form {
\t \t width:302px;
\t \t }
\t \t
\t .label-radio{
\t \t \t font-size: 0.8em;
\t \t \t color:#d8e3e6;
\t \t \t margin-right: 10px;
\t \t \t font-family:questrial;
\t \t \t
\t \t }
\t \t
.inputfield3 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.inputfield2 {
height: 33px;
max-height: 33px;
width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 0px;
padding: 0px 10px 0px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
.textareafield {
max-height: 350px;
width: 302px;
max-width: 302px;
border-radius: 16px;
margin-top: -10px;
margin-bottom: 17px;
padding: 10px 10px 10px 10px;
overflow: hidden;
border: none;
background-color: #ffffff;
display: inline-block !important;
font-family: questrial;
font-size: 0.8em;
}
\t \t #g-recaptcha-outer{
width: 302px;
height: 72px;
display:flex;
justify-content:center;
align-items:center;
overflow: hidden;
border-radius: 16px;
margin: -10px auto 20 auto;
}
\t \t
\t \t #recaptcha-header{
margin: 30px 0px -15px 0px;
color:#d8e3e6;
font-size: 1.0em;
\t \t \t font-family:questrial;
\t \t \t font-size:0.8em;
\t \t \t letter-spacing: -0.03em;
}
\t \t
\t #contact_submit_button{
display: block;
text-decoration: none;
margin: 10px auto 80px auto;
width: 230px;
height:33px;
padding: 0px 15px 0px 15px;
background-color: rgb(0, 157, 233);
color:#ffffff;
border-radius: 16px;
border: none;
outline: none;
\t \t \t font-family:questrial;
\t \t \t font-size:1em;
\t \t \t
\t }
\t
\t .requiredmark {
\t \t margin:0px 0px 0px 295px;
\t \t display: inline-block;
\t \t color: #d8e3e6;
\t \t padding:20px 0px 0px 0px;
\t \t }
\t \t
\t \t .requiredmark2 {
\t \t margin:-39px 0px 0px 295px;
\t \t display: inline-block;
\t \t color: #d8e3e6;
\t \t padding:20px 0px 0px 0px;
\t \t }
\t \t .requiredmark-radio {
\t \t margin:20px 0px 0px 0px;
\t \t display: inline-block;
\t \t color: #d8e3e6;
\t \t font-family:questrial;
\t \t }
\t \t
.error{
\t \t \t display: none;
\t \t } \t \t
\t \t
\t \t .error_show{
\t \t \t color: red;
\t \t }
\t \t
\t \t input.invalid, textarea.invalid{
\t \t \t border: 1px solid red;
\t \t }
\t \t
\t \t input.valid, textarea.valid{
\t \t \t
\t \t }
label.error {
\t margin-top:-10px;
\t margin-bottom:30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}
#hiddenRecaptcha-error {
margin-top:65px!important;
margin-bottom:30px;
float: none;
color: red;
vertical-align: top;
display: block;
font-family: Questrial;
}
.gender { border-radius: 16px; margin-top: 5px; margin-bottom: 7px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; }
#gender-error { float: right; margin-bottom:0px!important; margin-top:20px!important}
.errMsg{
\t color:#ffffff;
}<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script src="{{ 'iframeresizer-min.js' | url_asset }}"type="text/javascript"></script>
<script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></script>
<style>
@font-face {
font-family: Questrial;
src: url(Questrial-Regular.otf);
}
div {
font-family: Questrial;
}
input {
font-family: Questrial;
}
text-area {
font-family: Questrial;
}
span {
font-family: Questrial;
}
p {
font-family: Questrial;
}
form {
font-family: Questrial;
}
</style>
</head>
<body>
<form id="comment_form" action="form.php" method="post">
<div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms" required><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>
<input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)">
<br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="email_again" name="emai_again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>
<input class="inputfield3" type="text" name="telephone_number" placeholder="telephone number (country code included)">
<br>
<div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
</div>
<div class="compulsoryfield"><span class="requiredmark2">*</span>
<textarea id="message_content" name="message_content" class="textareafield" type="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>
<p id="recaptcha-header">before sending, please show us you're real:</p>
<div><span class="requiredmark">*</span>
<div id="g-recaptcha-outer" class="compulsoryfield2">
<div class="g-recaptcha" data-sitekey="mykey" required></div>
</div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<br><br>
<input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">
</form>
<div class="errMsg">Please click on the Recaptcha box.</div>
</body>
</html>
でなければなりません。どのようなエラーが発生したのか、あなたが予期して見ている行動を教えてください。 – phuzi
@phuzi、電子メールがまったく入力されていないときに電子メールのメッセージが表示されます。または、有効な電子メールアドレスがない場合は、@を付けずに入力します。私が得意でないのは、入力された電子メールアドレスが互いに一致しないというメッセージです。電子メールアドレスが互いに等しくない場合、私はこれを示すメッセージを期待しています。 – Eddy