JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<script src="cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.min.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <form action="#" method="post" id="question_form">
    
       <!--BOF opation block-->
              <div class="question-option-block">
               <div class="qst_opt_val">	
                <p> Question 1 </p>
                <div class="options"> Answer is
                  <input type="text" class="form-control fillblank" name="fill" required="true" placeholder="Type Here">
                </div>
                </div>
              </div>
              <!--EOF option block--> 
    
    
       <!--BOF option block-->
              <div class="question-option-block">
               <div class="qst_opt_val">	
                <p> Question 2 </p>
               <div class="options">
                					<input type="radio" id="111962" name="1" value="1196"   required="true" onClick="changebox(this.value,this.name)">
					<label for="111962"><span>10</span></label>
									<input type="radio" id="111952" name="1" value="1195"   required="true" onClick="changebox(this.value,this.name)">
					<label for="111952"><span>11</span></label>
									<input type="radio" id="111942" name="1" value="1194"   required="true" onClick="changebox(this.value,this.name)">
					<label for="111942"><span>12</span></label>
									<input type="radio" id="111932" name="1" value="1193"   required="true" onClick="changebox(this.value,this.name)">
					<label for="111932"><span>13</span></label>
 
				                </div>
                </div>
              </div>
              <!--EOF option block--> 
    
    
      <div class="question-option-block">
        <div class="qst_opt_val">	
                <p> What is your mother's highest education level? </p>
                <div class="options">
                 ...

JavaScript

$(document).ready(function() {

  // validate signup form on keyup and submit
  var form = $('#question_form');
  var error = $('.alert-danger', form);
  $("#question_form").validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-block', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    ignore: "",
    rules: {
      fill: "required",
      radios1: "required",
      radios5: "required",

    },

    invalidHandler: function(form, validator) {

      error.show();
      var errors = validator.numberOfInvalids();
      if (errors) {
        $("html, body").animate({
          scrollTop: 200
        }, 1000);
      }
    },
    highlight: function(element, errorClass, validClass) { // hightlight error inputs
      $(element).closest('.qst_opt_val').addClass('has-error'); // set error class to the control group

      if($('.qst_opt_val').hasClass('has-error')){
		 			 $('.qst_opt_val').attr('id','test');
						}  

    },

    unhighlight: function(element) { // revert the change done by hightlight
      $(element)
        .closest('.qst_opt_val').removeClass('has-error'); // set error class to the control group
    },
    errorPlacement: function(error, element) {
      var name = $(element).attr("name");
      error.appendTo($("#" + name + "_validate"));
    },

    submitHandler: function(form) {
      error.hide();
      form.submit();
    }
  });

});