以下のように、HTML5 パターンと jQuery を使用してシンプルな連絡先フォームを検証しようとしています。
<form action="test.php" method="post" id="myForm">
<input type="text" name="name" id="name" class="form-control" pattern="[A-Za-z ]+" autofocus placeholder=" Please Enter Your Name" >
<input type="tel" name="phone" id="phone" class="form-control" pattern="\d{3}[\-]\d{3}[\-]\d{4}" autofocus placeholder="xxx-xxx-xxxx" >
<button type="submit" name="submit">Send Email</button>
</form>
フィールドが空の場合にフィールドを検証するために使用しているjqueryコードは次のとおりです。
$(document).ready(function () {
$('#myform').submit(function () {
var abort = false;
$("div.alert").remove();
$('input[type="text"]').each(function () {
if ($(this).val() === '') {
$(this).after('<div class="err"><p>Phone Field Cant be Empty</p></div>');
abort = true;
}
}); // go through each required value
if (abort) {
return false;
} else {
return true;
}
}) //on submit
}); // ready
しかし、何らかの理由でフォームを検証していません! ここで私が間違っていることを教えてください。