htmlタグのrequiredが反応しなくなってしまいました。

Question

前提・実現したいこと

新規登録のフォームをhtml,css,javascriptで作成しています。
入力していない項目があった場合、requiredを設定してメッセージを表示させたいです。

初心者なので至らない点もございますが、ご教授いただければ幸いです。

発生している問題・エラーメッセージ

requiredメッセージが表示される項目とされない項目があります。
（radioボタンのみ表示されます）
また、入力されていなくてもsubmitができるようになってしまいました。

javascriptは競合の可能性があるため、ソースコードを載せています。

該当のソースコード

<form>
    <table>

        <tr>
            <th id="th">名前(10文字以内)</th>
            <td id="td"><input type="text" name="display_name" size="50"　required　maxlength="10"></td>
        </tr>

        <tr>
            <th id="th">ログイン名　(10文字以内)</th>
            <td id="td"><input type="text" name="login_name" size="50"　required　maxlength="10"></td>
        </tr>

        <tr>
            <th id="th">パスワード　(6以上20文字以内)</th>
            <td id="td"><input type="text" name="password1" size="50"　required　maxlength="20" minlength="6"></td>
        </tr>

        <tr>
            <th id="th">パスワードを再入力</th>
            <td id="td"><input type="text" name="password2" size="50"　required　maxlength="20" minlength="6"></td>
        </tr>
         <tr>
            <th id="th">権限の設定</th>
            <td id="td">
                <input type="radio" name="authority" required>管理者
                <input type="radio" name="authority" required>一般ユーザー
            </td>
        </tr>

    </table>

    <button type="button" class="button1">戻る</button>
    <button type="submit" class="button2" id="make">作成</button>

</form>

//history back
 $(document).on('click', ".button1", function(event){
    window.history.back(); 
});


//signup password check
 $(document).on('click', "#make", function(event){
    var mail = $("input[name='password1']").val(); //メールフォームの値を取得
    var mailConfirm = $("input[name='password2']").val(); //メール確認用フォームの値を取得
    // パスワードの一致確認
    if (mail != mailConfirm){
      alert("パスワードと確認用パスワードが一致しません"); // 一致していなかったら、エラーメッセージを表示する
      return false;
    }else{
      return true;
    }
});

試したこと

buttonのTYPEを変更してみましたが、buttonでもsubmitでも変わりませんでした。

Comments

[m.ts10806]

現象が確認されたブラウザの種類とバージョンを記載してください。またそれ以外のブラウザでも確認してみてください

Answer 1

ご提示いただいたコードで私も問題を再現することができました。

required の前後にある空白文字が半角ではなく全角になっているからだと思います（この行だけでなく他の行もそうなっているので、全角空白をすべて検索して置換されるのがよいかと思います）。

-            <td id="td"><input type="text" name="display_name" size="50"　required　maxlength="10"></td>
+            <td id="td"><input type="text" name="display_name" size="50" required maxlength="10"></td>

お試しになってみてください。

Comments

[gh640]

x_x さんがすでに回答されているのに気づかず回答してしまいました。 x_x さんのご回答をご参照ください。

[mori-.-]

ソースコードまで記述していただき、ありがとうございました…！
x＿xさんに先に回答していただいたため、ベストアンサーはx＿xさんにさせていただきましたが
とても参考になりました。ありがとうございます。

[gh640]

よかったです！ベストアンサーは x_x さんで私も異論ありません。

蛇足です。半角空白を使うべきところで全角空白を使ってしまうとこのような問題が起こる & 間違いに気づくのが非常に難しいので、コードを書かれる際はエディタの機能で全角空白を強調するようにするか、キーボード設定（ IME 設定）で全角空白が入力されないようにするか、等をされると再発防止に役立つかと思います :)

[mori-.-]

対策方法ありがとうございます。早速設定してみようと思います！

[gh640]

はい、ぜひやられてみてください。

Answer 2

あちこちにある「　」(全角空白)を(半角の)空白文字に置き換えてください

Comments

[mori-.-]

空白が全角になっていることに全く気が付きませんでした…
本当に初歩的なミスですみません。
回答ありがとうございました。