JSFiddle - React, Tailwind, and code Playground

by Pavel Azanov

HTML

<script src="https://wyto.net/projects/jcv/jquery.csssr.validation.js"></script>
<form 
    id="frmRegister" 
    action="#" 
    method="post" 
    data-validate
    data-invalid-class="invalid">
    
    <!-- 
      A required field, you have to enter at east 3 characters
      and cannot enter more than 10 characters
    --> 
    <input type="text" name="username" minlength="3" maxlength="10" placeholder="Username (3 to 10 characters)" required>
    
    <input type="submit" value="register" />
</form>

CSS

* { padding: 0; margin: 0 }
form { padding: 20px }
input {
    margin-bottom: 5px;
    padding: 5px 10px;
    display: block;
    border: solid 1px lightgrey;
    outline: none;
}
input.invalid {
    border-color: red
}
input[type="text"] {
  width: 180px;
}
input[type="submit"] {
    background: lightgrey;
}

JavaScript

$(function() {
    
    // Add a submit handler to prevent 
    // real form submission for test purposes
    $('#frmRegister').on('submit', function() {
        alert('I\'m valid and submitted!');
        
        return false;
    });
    
});