JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<form id='targets' action='http://www.innovativephp.com' method='post'  >      <div class='error_group' id='error_group'>
    </div>
    <ul>
        <li ><div class='label_col'>Name</div><div class='field'><input type='text' name='test_field' id='name' /></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 ><div class='label_col'>Comment</div><div class='field'><textarea name='test_field'  id='comment' ></textarea></div>

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

.error_group{
 background-color: #FFCCCC;    color: #5E3232;

 padding:10px; 
    display:none;
  margin:5px;  
}

JavaScript

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