JSFiddle - React, Tailwind, and code Playground

HTML

<form id='targets' action='http://www.innovativephp.com' method='post'  >    
    <ul>
        <li ><div class='label_col'>Name</div><div class='field'><input type='text' name='test_field' id='name' /></div></li>
        <li class='error_msg' >
        <div class='label_col'>&nbsp;</div><div class='error_field' id='name_error_msg'>&nbsp;</div>
        </li>
            
        <li ><div class='label_col'>Country</div><div class='field'>
                <select name='test_field'  id='country' >
                    <option value='0'>Select</option>
                    <option value='LK'>Sri Lanka</option>
                    <option value='IN'>India</option>
                    <option value='UK'>United Kingdom</option>
                </select></div>
        </li>
        <li class='error_msg' >
            <div class='label_col'>&nbsp;</div><div class='error_field' id='country_error_msg'>&nbsp;</div>
        </li>
                
        <li ><div class='label_col'>Comment</div><div class='field'><textarea name='test_field'  id='comment' ></textarea></div>
        <li class='error_msg' >
        <div class='label_col'>&nbsp;</div><div class='error_field' id='comment_error_msg'>&nbsp;</div>
        </li>
                    
                    <li ><div class='label_col'>&nbsp;</div><div class='field'><input type='checkbox' name='test_field'  id='checkboxid' />I Agree to Terms of Use</div>
        <li class='error_msg' >
        <div class='label_col'>&nbsp;</div><div class='error_field' id='checkboxid_error_msg'>&nbsp;</div>
        </li>
                        
                        <li><div class='label_col'>&nbsp;</div><div class='field'><input type='submit' value='Save' /></div></li>
    </ul>
    
    
    
    
    
    
    
</form>

CSS

.label_col{
 width:20%;
  padding:5px;  
float:left;
}

.field{
 width:75%;
  padding:5px;
 float:left;
}
.error_field{
 width:75%;
  padding:5px;
 float:left;
    

}
.error_msg{
display:none;
 clear:both;  
   color:#f00;
}

li{
    width:100%;
    float:left;
}

JavaScript

$('#targets').submit(function() {
  var error=0;
    
    var name = $('#name').val();
    if(name == ''){
        error = 1;
        $('#name_error_msg').html("Name cannot be empty");
        $('#name_error_msg').parent().show();
    }
    
    
    var country = $('#country').val();
    if(country == '0'){
        error = 1;
        $('#country_error_msg').html('You should select a country.');
        $('#country_error_msg').parent().show();
    }
    
    var comment = $('#comment').val();
    if(comment == ''){
        error = 1;
        $('#comment_error_msg').html('Comment cannot be empty.');
        $('#comment_error_msg').parent().show();
    }
    
    if(!($('#checkboxid').is(':checked'))) {
        error = 1;
        $('#checkboxid_error_msg').html("Please Tick the Agree to Terms of Use.");
        $('#checkboxid_error_msg').parent().show();
    }
    
    if(error){
        return false;
    }else{
        return true;
    }       
});