JSFiddle - React, Tailwind, and code Playground

by Julien Roy

HTML

<form name="form" id="form" method="POST">
    <label>Phone Number:</label>
    <input id="phone_no" class="input_style" name="phone_no"></input>
</form>

CSS

.valid {
    border: 1px green solid;
}
.input_style {
    border: 2px grey solid;
}
.invalid {
    border: 1px red solid;
}

JavaScript

function checkPhone() {
    var input = $(this);
    var phone_ = input.val();
    var phonefn = phone_.charCodeAt(0);

    if (phone_.length > 0) {
        if (phone_.length != 11 || phonefn != 48) {
            input.removeClass('input_style valid')
                .addClass('invalid');
        } else {
            input.removeClass('input_style invalid')
                .addClass('valid');
        }
    } else {
        input.removeClass('valid invalid');
    }
}

$(document).ready(function () {
    // Handler for .ready() called.
    $("#phone_no").on('blur', checkPhone);
});