0
検証エラーメッセージが正しく表示されませんでした。たとえば、名前入力に値を挿入しましたが、電子メールの検証エラーメッセージが表示されました。特定の入力に値を挿入すると、それの検証エラーメッセージだけが表示されます。関連入力で検証エラーメッセージが正しく表示されませんでした
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send/>
</div>
</form>
$(document).ready(function() {
$(".contactForm input,.contactForm textarea").each(function() {
$(this).keyup(function() {
var pt = /^[\w.][email protected][a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
}
else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
}
else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.][email protected][a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}