How to correctly validate a yes / no check so that if the user does not check one of the options, it will be informed. The page layout can be changed for correctness. The same questions can be any number.

<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>

    1 answer 1

    Mark required radio buttons with the required attribute

     <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>