4

以下のように、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

しかし、何らかの理由でフォームを検証していません! ここで私が間違っていることを教えてください。

4

2 に答える 2