JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<table cellspacing="10px" cellspacing="5px" class="sign_up_table">
  
	<tr>
    	<td><input class="ui_input2" id="input_fname" type="text" name="fname" style="height:25px; width:220px; font-size:16px;" onKeyUp="javascript:input_fname_keyup(1)" required /></td>
        <td style="padding-left:60px;">
        	<input class="ui_input2" id="input_lname" type="text" name="lname" style="height:25px; width:220px; font-size:16px;" required />
        </td>
    </tr>
    
</table>

CSS

.ui_input2 {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 200px;
    outline: none;
    color: #000;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;
}

input.watermark {
	color: #D3D3D3; font-weight: 400;
}

JavaScript

$(document).ready(function() {
 
	var watermark = 'First Name';
 
	//init, set watermark text and class
	$('#input_fname').val(watermark).addClass('watermark');
 
	//if blur and no value inside, set watermark text and class again.
 	$('#input_fname').blur(function(){
  		if ($(this).val().length == 0){
    		$(this).val(watermark).addClass('watermark');
		}
 	});
 
	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#input_fname').focus(function(){
  		if ($(this).val() == watermark){
    		$(this).val('').removeClass('watermark');
		}
 	});
});

$(document).ready(function() {
 
	var watermark = 'Last Name';
 
	//init, set watermark text and class
	$('#input_lname').val(watermark).addClass('watermark');
 
	//if blur and no value inside, set watermark text and class again.
 	$('#input_lname').blur(function(){
  		if ($(this).val().length == 0){
    		$(this).val(watermark).addClass('watermark');
		}
 	});
 
	//if focus and text is watermrk, set it to empty and remove the watermark class
	$('#input_lname').focus(function(){
  		if ($(this).val() == watermark){
    		$(this).val('').removeClass('watermark');
		}
 	});
});

/* ********************************************************** */

function input_fname_keyup(id) {
  $(document).ready(function() {
    $('#input_fname').keyup(function() {

        var empty = false;
        $('#input_fname').each(function() {
            if ($(this).val().length < 3) {
                empty = true;
            }
        });

        if (empty) {
            $('#input_fname').addClass("invalid");
        } else {
			$('#input_fname').addClass("valid");
        }
    });
});
}