html5のフォームバリデーションが適用されていない

現在アンケートフォームを作成しています。
ラジオボタンとセレクトボックスがあり、すべて必須にして入力がない場合はバリデーションエラーを出したいと思います。

ただ、hteml5でフォームバリデーションエラーが設定されているので、そのつもりでやりたいです。

問題が起こっていること

selectボックスのバリデーションは上手く表示されるのですが、ラジオボタンのバリデーションが表示されません。requiredの明記はしています。

やってみたこと

cssのリンクを切ったらうまくいきました。でも、cssはこのままいきたいと考えています。
ラジオボタンの該当箇所のcssを削除しても状況は変わりませんでした。

ソースコード

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/select.js" type="text/javascript"></script>
    <title>Document</title>
</head>
<body>
<div class="form" style="display: flex; justify-content: center; align-items: center;" >
    <form method="post" action="result.php">
        <section class="sec1">
          <div class="q1">
            <h3>Q1</h3>
            <HR SIZE=4>
              <input type="radio" name="q1" value="best" id="q1_radio01" required>
              <label for="q1_radio01" class="radio">1</label>
      
              <input type="radio" name="q1" value="good" id="q1_radio02" />
              <label for="q1_radio02" class="radio">2</label>
      
              <input type="radio" name="q1" value="soso" id="q1_radio03" />
              <label for="q1_radio03" class="radio">3</label>
      
              <input type="radio" name="q1" value="bad" id="q1_radio04" />
              <label for="q1_radio04" class="radio">4</label>
    
              <input type="radio" name="q1" value="worst" id="q1_radio05" />
              <label for="q1_radio05" class="radio">5</label>
          </div>    

          <div class="q21">
            <h3>Q2.選んでください</h3>
            <HR SIZE=4>
            <div class="cp_ipselect">
                  <select name="q2" class="cp_sl06" required id="select">
                  <option value="" hidden disabled selected></option>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
            </select>
            <span class="cp_sl06_highlight"></span>
            <span class="cp_sl06_selectbar"></span>
            <label class="cp_sl06_selectlabel">答えて下さい</label>
            </div>
        </section>
        <div class="submit">
        <button type="submit" name="submit" class="square_btn">診断</button>
        <div>
      </form>
</div>
</body>
</html>

styles.css

input[type=radio], input[type=checkbox] {
    display: none;
  }
  
  .radio, .checkbox {
    box-sizing: border-box;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative;
    display: inline-block;
    margin: 0 20px 8px 0;
    padding: 12px 12px 12px 42px;
    border-radius: 8px;
    background-color: #f6f7f8;
    vertical-align: middle;
    cursor: pointer;
  }
  .radio:hover, .checkbox:hover {
    background-color: #e2edd7;
  }
  .radio:hover:after, .checkbox:hover:after {
    border-color: #53b300;
  }
  .radio:after, .checkbox:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 6px;
    content: '';
  }
  
  .radio:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #53b300;
    content: '';
    opacity: 0;
  }
  input[type=radio]:checked + .radio:before {
    opacity: 1;
  }

  .cp_ipselect {
    position: relative;
    width: 90%;
    margin: 2em auto;
    text-align: center;
    }
    .cp_sl06 {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    width: 100%;
    padding: 10px 10px 10px 0;
    font-size: 18px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0, 0.3);
    }
    .cp_sl06:focus {
    outline: none;
    border-bottom: 1px solid rgba(0,0,0, 0);
    }
    .cp_ipselect .cp_sl06 {
    appearance: none;
    -webkit-appearance:none
    }
    .cp_ipselect select::-ms-expand {
    display: none;
    }
    .cp_ipselect:after {
    position: absolute;
    top: 18px;
    right: 10px;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.3);
    pointer-events: none;
    }
    .cp_sl06_selectlabel {
    color: rgba(0,0,0, 0.5);
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: 0.2s ease all;
    }
    .cp_sl06:focus ~ .cp_sl06_selectlabel, .cp_sl06:valid ~ .cp_sl06_selectlabel {
    color: #53b300;
    top: -20px;
    transition: 0.2s ease all;
    font-size: 14px;
    }
    .cp_sl06_selectbar {
    position: relative;
    display: block;
    width: 100%;
    }
    .cp_sl06_selectbar:before, .cp_sl06_selectbar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #53b300;
    transition: 0.2s ease all;
    }
    .cp_sl06_selectbar:before {
    left: 50%;
    }
    .cp_sl06_selectbar:after {
    right: 50%;
    }
    .cp_sl06:focus ~ .cp_sl06_selectbar:before, .cp_sl06:focus ~ .cp_sl06_selectbar:after {
    width: 50%;
    }
    .cp_sl06_highlight {
    position: absolute;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
    }

    .submit{
      margin:0 auto;
      text-align : center ; 
    }
    .square_btn{
      display: inline-block;
      padding: 0.5em 1em;
      text-decoration: none;
      background: #53b300;/*ボタン色*/
      color: #FFF;
      border-bottom: solid 4px #008000;
      border-radius: 3px;
  }
  .square_btn:active {/*ボタンを押したとき*/
      -ms-transform: translateY(4px);
      -webkit-transform: translateY(4px);
      transform: translateY(4px);/*下に動く*/
      border-bottom: none;/*線を消す*/
  }

  .result{
    width:1000px;
    margin:0 auto;
    text-align : center ; 
    padding: 0.5em 1em;
    /* margin: 2em 0; */
    border: double 5px #53b300;
  }
  
  /* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( max-width:750px )
{
	.result
	{
    width:450px;
    margin:0 auto;
    text-align : center ; 
    padding: 0.5em 1em;
    /* margin: 2em 0; */
    border: double 5px #53b300;
	}
}

  h2 {
    background:linear-gradient(transparent 60%, #53b300 0%)
}

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

行動規範の内容に同意します

回答1件

ベストアンサー

バリデーション時に非表示要素は無視されます。
スタイルを変更するために元のradio自体を非表示にしてあるせいでバリデーションの対象外になっています。
ざっと試した感じだと、opacity: 0;ならバリデーションが実行されます。
が、見えないだけで幅をとるので、隙間ができます。
これをwidth: 0;とすると、バリデーションの対象外になります。
width: 1px;なら対象になります。

追記

非表示にしてはいけないので、冒頭のこの部分、display: none;をやめる必要があります。
修正しないといけないのはここだけです。

css
1input[type=radio], input[type=checkbox] {
2    display: none;  // ← これは削除
3    opacity: 0;
4    width: 1px;
5  }

追記2

https://jsfiddle.net/tq4gj5bL/10/
ご提示のソースコードで状況を再現させてみて、修正を加えたものです。

このようにメッセージが出てきます。

(HTMLの構造がちょっとだけおかしかったのでそれも修正していますが、その修正前後で挙動は変化しませんでした。)

ブラウザによって挙動が異なるとかはもしかするとあるかもしれません。

投稿2018/09/16 09:39

編集2018/09/16 13:51

spookybird

総合スコア1803

bigin

2018/09/16 09:49 編集

ありがとうございます！ cssのすべてのopacityを0にしてwidth:0を1pxにしたけど変わらずでした^^;

bigin

2018/09/16 11:44

cssを以下のように修正しましたが、結果は同じでしたm(_ _)m input[type=radio], input[type=checkbox] { opacity: 0; width: 1px; }

bigin

2018/09/16 14:54

修正コードも上げていただき感謝しますm(_ _)m

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！