JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<select id="colorselector">
   <option value="" selected disabled>Pilih</option>
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</select>
<div id="red" class="colors" style="display:none"> red... 
  <input type="text" class="cek">
  <input type="text" class="cek">
</div>
<div id="yellow" class="colors" style="display:none"> yellow.. 
  <input type="text" class="cek">
  <input type="text" class="cek">
</div>
<div id="blue" class="colors" style="display:none"> 
  <input type="text" class="cek">
  <input type="text" class="cek">
</div>

<button class="submit">test</button>

CSS

.error{border:1px solid red}

JavaScript

$(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
            $('.colors').children('input').val('')
            $('#' + $(this).val()).show();
            
        });
    });
    
    $('.submit').click(function(){
        var select_ = $("#colorselector").val();
        var condition = $("#" + select_).children('input');
        
			 	condition.each(function(){
        	console.log($(this).val());
          var this_ = $(this)
          if (this_.val().length > 0) {
          	this_.removeClass('error')
         
          } else {
          	this_.addClass('error')
          }
        })
        
       	/* if (condition.length > 0) {
       	          alert ('sukses')
       	          $("#" + select_).children('input').removeClass('error')
       	        } else {
       	          $("#" + select_).children('input').addClass('error')
       	        }  */
        
    	
    })