JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<main>
    <h1>Password (UpperCase, LowerCase, Number/SpecialChar and min 8 Chars)</h1>
    <form id=validForm>
        <label>UserID</label>
        <input id=userID type=text />
        <label for=password>Password</label>
        <input id=password type=password placeholder=password pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required />
        <div id=valid>
            <h4>Password must: </h4>
            <ul>
                <li id=validLeastOnelower>have at least one lowercase character</li>
                <li id=validLeastOneUpper>Have at least one capital letter</li>
                <li id=validLeastOneNumber>Have at least one number</li>
                <li>Not contain multiple identical consecutive characters</li>
                <li id=valid8Characters>Be at least 8 characters</li>
                <li id=validSpecialCharacters>include special Characters</li>
            </ul>
        </div>    
        <input type="radio" name="radioGroup" id="radio1" value="option1" required />
        <input type="radio" name="radioGroup" id="radio2" value="option2" required />
        <input class="form-control" value="Fruits" autofocus required />
        <select class="form-control" id="ptype_oq" required>
            <option value="">Please selelct</option>
            <option value="Satisfatory">Documents</option>
            <option value="val1">OPtion 1</option>
            <option value="val2">OPtion 2</option>
        </select>
        <input type=submit value=Continue />
    </form>
</main>

CSS

*{box-sizing:border-box;padding:0; margin:0;}

:root,body{
    position:relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background: ghostwhite;
}

main{
    width:100%;
    height:100%;
    overflow:hidden;
    padding:20px;
    text-align:center
}

#validForm{
    
}
#validForm li{
    list-style:none;
    position:relative;
    text-align:left
}
#validForm li:before{
    content:"";
    position:absolute;
    top:50%;
    left:-20px;
    margin-top:-8px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:red;
}
#validForm li.valid:before{
    background:green;
}
#validForm #valid{ 
   display:none
} 
input#password:focus + #valid{ 
   display:block
} 
input:required:hover { 

}
/**--------VALID----------*/
input[type="text"]:valid, 
input[type="name"]:valid, 
input[type="password"]:valid, 
input[type="email"]:valid { 

} 
input[type="text"]:valid:focus,
input[type="name"]:valid:focus, 
input[type="password"]:valid:focus, 
input[type="email"]:valid:focus { 

}
input[type="text"]:valid:hover,
input[type="name"]:valid:hover, 
input[type="password"]:valid:hover, 
input[type="email"]:valid:hover { 

}

/**---------INVALID---------*/
input[type="text"]:invalid, 
input[type="name"]:invalid, 
input[type="password"]:invalid, 
input[type="email"]:invalid { 

} 
input[type="text"]:invalid:focus,
input[type="name"]:invalid:focus, 
input[type="password"]:invalid:focus, 
input[type="email"]:invalid:focus { 

} 
input[type="text"]:invalid:hover,
input[type="name"]:invalid:hover, 
input[type="password"]:invalid:hover, 
input[type="email"]:invalid:hover { 

} 

/**---------REQUIRED---------*/
input[type="text"]:required,
input[type="name"]:required, 
input[type="password"]:required, 
input[type="email"]:required { 

} 

/**---------OPTIONAL---------*/
input[type="text"]:optional,
input[type="name"]:optional, 
input[type="password"]:optional, 
input[type="email"]:optional { 

}...

JavaScript

function submitFrom() {
    alert("Success Yesss!!!");
    return false;
}

function validatePassword() {
  var  userName = userID.value,
       password = this.value;

    if(/(?=.*\W+)/.test(password)){
        validSpecialCharacters.classList.add("valid");
    }else{
        validSpecialCharacters.classList.remove("valid");
    }
    
    if(/(?=^.{8,}$)/.test(password)){//be at least 8 characters
        valid8Characters.classList.add("valid");
    }else{
        valid8Characters.classList.remove("valid");
    }
    if(/(?=.*[a-z])/.test(password)){//at least one lower case letter exists
        validLeastOnelower.classList.add("valid");
    }else{
        validLeastOnelower.classList.remove("valid");
    }
    if(/(?=.*[A-Z])/.test(password)){//at least one upper case letter exists
        validLeastOneUpper.classList.add("valid");
    }else{
        validLeastOneUpper.classList.remove("valid");
    }
    if(/(?=.*[0-9])/.test(password)){//at least one Number exists
        validLeastOneNumber.classList.add("valid");
    }else{
        validLeastOneNumber.classList.remove("valid");
    }

}
var validForm = document.querySelector("#validForm"),
    passwordInput = document.querySelector("#password");

var userID = document.querySelector("#userID"),
    valid8Characters = document.querySelector("#valid8Characters"),
    validLeastOnelower = document.querySelector("#validLeastOnelower"),
    validLeastOneUpper = document.querySelector("#validLeastOneUpper"),
    validLeastOneNumber = document.querySelector("#validLeastOneNumber"),
    validSpecialCharacters = document.querySelector("#validSpecialCharacters");

validForm.addEventListener("submit",submitFrom,false);
passwordInput.addEventListener("input",validatePassword,false);