Валидация теста с radio кнопками

204

22 августа 2018, 15:30

Как сделать правильно валидацию на отмечание да/нет, чтобы если пользователь не отметил один из вариантов ему это сообщило. Разметку страницы можно для правильности изменить. Так же вопросов может быть сколько угодно.

<form action="" name="question_form"> 
<div class="container"> 
    <div class="row page_title"> 
        <h1>Title</h1> 
    </div> 
    <div class="row question_q"> 
        <div class="questions"> 
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
                <p>Question-1?</p> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn"> 
                <div> 
                    <input type="radio" name="question1" id="radio1" /> 
                    <label for="radio1">yes</label> 
                </div> 
                <div> 
                    <input type="radio" name="question1" id="radio2" /> 
                    <label for="radio2">no</label> 
                </div> 
            </div> 
            <div class="clear"></div> 
        </div> 
        <div class="questions"> 
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
                <p>Question-2?</p> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn"> 
                <div> 
                    <input type="radio" name="question2" id="radio3"/> 
                    <label for="radio3">yes</label> 
                </div> 
                <div> 
                    <input type="radio" name="question2" id="radio4" /> 
                    <label for="radio4">no</label> 
                </div> 
            </div> 
            <div class="clear"></div> 
        </div> 
        <div class="questions"> 
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
                <p>Question-3?</p> 
            </div> 
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn"> 
                <div> 
                    <input type="radio" name="question3" id="radio5"/> 
                    <label for="radio5">yes</label> 
                </div> 
                <div> 
                    <input type="radio" name="question3" id="radio6" /> 
                    <label for="radio6">no</label> 
                </div> 
            </div> 
            <div class="clear"></div> 
        </div> 
    <div class="row"> 
        <div class="col-lg-4 col-lg-offset-8 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8 col-xs-12"> 
            <input type="submit" id="complete" value="go"> 
        </div> 
    </div> 
</div> 
</form>

Answer 1

Отмечайте обязательные радиокнопки атрибутом required

<form action="" name="question_form"> 
  <div class="container"> 
    <div class="row page_title"> 
      <h1>Title</h1> 
    </div> 
    <div class="row question_q"> 
      <div class="questions"> 
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
          <p>Question-1?</p> 
        </div> 
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn"> 
          <div> 
            <input type="radio" name="question1" id="radio1" required /> 
            <label for="radio1">yes</label> 
          </div> 
          <div> 
            <input type="radio" name="question1" id="radio2" required /> 
            <label for="radio2">no</label> 
          </div> 
        </div> 
        <div class="clear"></div> 
      </div> 
      <div class="questions"> 
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
          <p>Question-2?</p> 
        </div> 
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn"> 
          <div> 
            <input type="radio" name="question2" id="radio3" require d/> 
            <label for="radio3">yes</label> 
          </div> 
          <div> 
            <input type="radio" name="question2" id="radio4" required /> 
            <label for="radio4">no</label> 
          </div> 
        </div> 
        <div class="clear"></div> 
      </div> 
      <div class="questions"> 
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12"> 
          <p>Question-3?</p> 
        </div> 
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 radio_btn"> 
          <div> 
            <input type="radio" name="question3" id="radio5" required /> 
            <label for="radio5">yes</label> 
          </div> 
          <div> 
            <input type="radio" name="question3" id="radio6" required /> 
            <label for="radio6">no</label> 
          </div> 
        </div> 
        <div class="clear"></div> 
      </div> 
      <div class="row"> 
        <div class="col-lg-4 col-lg-offset-8 col-md-4 col-md-offset-8 col-sm-4 col-sm-offset-8 col-xs-12"> 
          <input type="submit" id="complete" value="go"> 
        </div> 
      </div> 
    </div> 
    </div> 
</form>