JSFiddle - React, Tailwind, and code Playground

by nimeshrmr

HTML

<form id='targets' action='' method='post'  >    
    <ul>
        
        <li ><div class='label_col'>Section</div><div class='field'><select name='test_field' id='section' >
            <option value='0'>Select</option>
            <option value='technical'>Technical Support</option>
            <option value='marketing'>Marketing Support</option>
            </select></div></li>
         <li class='error_msg' >
         <div class='label_col'>&nbsp;</div><div class='error_field' id='section_error_msg'>&nbsp;</div>
         </li>
        
        
        <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'>Message</div><div class='field'><textarea name='test_field' id='message' ></textarea></div></li>
        <li class='error_msg' >
        <div class='label_col'>&nbsp;</div><div class='error_field' id='message_error_msg'>&nbsp;</div>
        </li>
        
        
            
                    
                        
                        <li><div class='label_col'>&nbsp;</div><div class='field'><input type='submit' value='Save' /><input type='reset' value='Reset' class='reset'/></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;
    
    $('#name_error_msg').html('').parent().hide();
    $('#section_error_msg').html('').parent().hide();
    $('#message_error_msg').html('').parent().hide();
    
    var name = $('#name').val();
    var section = $('#section').val();
    var message = $('#message').val();
    if(section == '0'){
         error = 1;
         $('#section_error_msg').html("Please select a section");
         $('#section_error_msg').parent().show();     
    }
    if(name == ''){
        error = 1;
        $('#name_error_msg').html("Name cannot be empty");
        $('#name_error_msg').parent().show();
    }    
    if(message == ''){
        error = 1;
        $('#message_error_msg').html("Message cannot be empty");
        $('#message_error_msg').parent().show();     
    }
    
    if(error){
        return false;
    }else{
        switch(section){
            case 'technical':

                $('#targets').attr('action','http://www.innovativephp.com');
                break;
                    
                    case 'marketing':
                $('#targets').attr('action','http://www.innovativephp.com/ipress');
                break;
               }
        return true;
    }       
});