JSFiddle - React, Tailwind, and code Playground

by Ryan Morris

HTML

<form name="my-form">
    
    <fieldset>
        
        <input type="text" name="username" placeholder="username"  />
        
        <input type="email" name="email" placeholder="email" />
        
        <input type="tel" name="tel" placeholder="Telephone" />

        <input type="range" name="skill" placeholder="Comfort level" />
        
        <input type="number" name="age" min="18" max="120" placeholder="age"/>
        
        <input type="color" name="color" />
        
         <input type="url" name="url" placeholder="Your website" />

        <p class="help">
            Just tell us your website, please.
        </p>
        
    </fieldset>
    
    <fieldset>
            
        <input type="password" id="password" placeholder="password"/>
        <input type="password" id="password_confirm" placeholder="Confirm your password"/>
        
        
    </fieldset>
    
    <input type="submit" value="submit"/>
</form>

CSS

input{
    display:block;
}

input:valid,
input:in-range {
    background:hsl(120, 50%, 90%);
    border-color:hsl(120, 50%, 50%);
}

input:invalid,
input:out-of-range {
    border-color:hsl(0, 50%, 50%);
    background:hsl(0, 50%, 90%);
}

.help{
    display:none;
}
input:focus + .help,
input:invalid + .help {
    display:inline-block;
}

JavaScript

$("input[type='password']").on('change', validatePass);

function validatePass(e) {
    
    var val1 = $("#password").val();
    var val2 = $("#password_confirm").val();
    
    if (val1!==val2) {
        
       $(this)[0].setCustomValidity("Passwords Don't Match");

    } else {
        
        //$(this)[0].setCustomValidity("");
        
    }
    
}

$("form").on('submit', function(e) {
   e.preventDefault(); 
});