JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<form id="password-strength" name="password-strength">
    <input type="text" placeholder="Password" id="password">
    <input type="submit" value="Check">
</form>
<output for="password"></output>

CSS

body, input, form {font-family: Calibri, sans-serif; font-size: 16px;}
input {padding: 4px 3px;}
[type=submit] {vertical-align: baseline; padding: 2px 6px;}

output {margin-top: 1em;}
.valid {color: green;}
.invalid {color: red;}

JavaScript

Element.implement({
    'isValid': function(validationType) {
        var validationType = validationType || 'password';
        // assume invalid unless proven otherwise. These are private variables and can't be changed from outside
        var isValid = false;
        var text = this.get('value');
        var l = text.length;
        
        // you can validate text input fields against any of the following methods.
        // For example: $('city').isValid('city')
        var validationTypes = {
            'password': function() {
                if (l <= 8 || l % 2 == 0) return false;

                var specialchars = '!@#$%^&*()'.split('');
                if (!specialchars.contains(text[0]) && !specialchars.contains(text[l - 1])) return false;

                var middle = text[l / 2 - 0.5];
                if (!specialchars.contains(middle)) return false;

                if (!text.match(/^..\d.+$/)) return false;

                var hasUpper = false;
                for (var i = 0; i < l; i++) {
                    if (text[i].match(/[A-Z]/)) {
                        hasUpper = true;
                        break;
                    }
                }
                if (!hasUpper) return false;


                // if the validator have made it so far then:
                isValid = true;
            }.bind(this),

            'name': function() {
                if (!text[0].match(/[A-Z]/)) return false;

                isValid = true;
            }.bind(this),
            
            'zip': function() {
                if (l != 5) return false;
                
                isValid = true;
            }.bind(this)
        };

        validationTypes[validationType]();

        return isValid;
    }
});

$('password-strength').addEvent('submit', function(ev) {
    ev.preventDefault();
    if ($('password').isValid()) {
        $$('output').set({
            'html': 'Strong password!',
            'class': 'valid'
        });
    } else {
  ...