送信ボタンクリック時、Jqueryが効かない場合がある。

Question

###わからないこと
いつもお世話になっております。
下記のコードでjqueryを記述しているのですが、送信ボタンが効かない場合があります。
条件としては、入力フォームが三つあり、そのうちのいずれかが未入力であれば送信ボタンが効かない仕様にしています。
ただ、すべて入力してあるにも関わらず効かないケースがあり、どうすればいいのか困っております。
ご教授いただければ幸いです。

$('#entry-submit').on('click', function(){
    if($('input[name="title"]').val() == '' || $('input[name="tel"]').val() == '' || $('input[name="mail"]').val() == ''){
        $('.entry-form').each(function(){
            if($(this).val() == ''){
                $(this).addClass("error");
                $("#entry-submit").prop('disabled', true);
                $tr = $(this).closest(".reg-element");
                $tr.find(".form-error").text($tr.find(".reg-ttl").text()+"を入力してください。");
            } else {
                $(this).removeClass("error");
            }
        });
    } else {
        $(this).removeClass("error");
        $('#entry-submit').submit();
    }
});

<form action="" method="POST" class="entry-form reg-form" lang="ja">
<table>
    <tbody>
        <tr class="reg-element">
            <th><span class="reg-ttl">お名前</span></th>
            <td class="data">
                <div class="form-error"></div>
                <input type="text" name="title" value="" maxlength="9999" data-required="1" class="normalize entry-form">
            </td>
        </tr>
        <tr class="reg-element">
            <th class="item"><span  class="reg-ttl">携帯番号</span></th>
            <td class="data">
                <div class="form-error"></div>
                <input type="text" name="tel" value="" maxlength="9999" data-required="1" class="entry-form">
            </td>
        </tr>
        <tr class="reg-element">
            <th><span class="reg-ttl">アドレス</span></th>
            <td>
                <div class="form-error"></div>
                <input type="text" name="mail" value="" maxlength="9999" data-required="1" class="entry-form">
            </td>
        </tr>
        <tr class="data-set reg-element">
            <th>C</th>
            <td><textarea name="cccc" value="" maxlength="9999"></textarea></td>
        </tr>
    </tbody>
</table>
<button type="submit" id="entry-submit">送信</button>
</form>

何卒よろしくお願いいたします。

Answer 1

jQueryを使わずとも、required属性を使えば必須チェックはブラウザに任せることができます（参照）。

Can I useによれば、IE 10以上、iOS 10.3以上を含むほとんどのブラウザで<input required>によるバリデーションに対応しています。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
requiredを利用した場合、「しかじかのフォームが未入力です」といった特定の文言を表示させることはできるのでしょうか？

[KazuhiroHatano]

HTML5のFormValidationは、ブラウザによって挙動が違うからその辺注意です
Safariとかは必須入力漏れてても普通に送信できたはずです

基本は:invalidの擬似セレクタがつくので
JSで:invalidがあれば送信しないようにするとか
CSSで:invalid:afterにメッセージいれたりとかって感じです

[maisumakun]

Safariも、iOS 10.3でようやくrequiredが空欄のときに送信を止めてくれるようになりました。

requiredが空欄の場合、多くのブラウザで、フォームから吹き出しが出て「値が入力されていません」のようなメッセージが出ます。

[退会済みユーザー]

ご回答ありがとうございます。
ご指摘の通り、requiredを入れたやり方でうまくいきました！

Answer 2

$("#entry-submit").prop('disabled', true);

一度引っかかってしまうと二度と復活しないようです。

Answer 3

requiedは基本的に使うほうがいいでしょうその上で

$(function(){
  $('#entry-submit').on('click',function(e){
    $(this).closest('form').find('div.form-error').html("");
    $(this).closest('form').find('input,textarea').css('background-Color','');
    $(this).closest('form').find('input:required,textarea:required').filter(function(){
      return $(this).val()=="";
    }).each(function(){
      $(this).css('background-Color','red');
      $(this).siblings('div.form-error').html($(this).data("err-msg"));
      e.preventDefault();
    });
  });
});

<form action="" method="POST" class="entry-form reg-form" lang="ja">
<table>
<tbody>
<tr class="reg-element">
<th><span class="reg-ttl">お名前</span></th>
<td class="data">
<div class="form-error"></div>
<input type="text" name="title" value="" maxlength="9999" data-required="1" class="normalize entry-form" required data-err-msg="名前かけ">
<span></span></td>
</tr>
<tr class="reg-element">
<th class="item"><span  class="reg-ttl">携帯番号</span></th>
<td class="data">
<div class="form-error"></div>
<input type="text" name="tel" value="" maxlength="9999" data-required="1" class="entry-form" required data-err-msg="携帯かけ">
</td>
</tr>
<tr class="reg-element">
<th><span class="reg-ttl">アドレス</span></th>
<td>
<div class="form-error"></div>
<input type="text" name="mail" value="" maxlength="9999" data-required="1" class="entry-form" required data-err-msg="アドレスかけ">
</td>
</tr>
<tr class="data-set reg-element">
<th>C</th>
<td><div class="form-error"></div>
<textarea name="cccc" value="" maxlength="9999" required data-err-msg="コメンかけ"></textarea></td>
</tr>
</tbody>
</table>
<button type="submit" id="entry-submit">送信</button>
</form>

Comments

[退会済みユーザー]

ご回答ありがとうございます！
こちらのやり方で完全にうまくいきました。
ありがとうございます

Answer 4

コード見た感じ「入力しているのに送信できない」ではなく
「入力してないのに送信できてしまう」のではないかと思うんですが
どうなんでしょう

まあとりあえずtype='submit'のボタンのクリックのイベントリスナーで
フォームの送信を止めるにはreturn false;か
event.preventDefault();かはしないといけないです

もし他の場所でやっているならそこが原因かもしれないですね