JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
REGEX PATTERN: <input type="text" id="testpattern">
CSS
body{
font-family: helvetica;
}
.validationWindow{
position: absolute;
width: 160px;
background-color: #999;
color: #fff;
padding:10px;
font-size: 12px;
display: none;
}
.validationWindow button.validator-close-button{
position: absolute;
right:10px;
top:10px;
background-color: #fff;
border: none;
}
.validationWindow select{
padding:5px;
border:none;
width: calc(100% - 0px);
margin-bottom:2px;
}
.validationWindow input{
padding:5px;
border:none;
width: calc(100% - 110px);
margin-bottom:2px;
}
.validationWindow p.hide{
display: none;
}
.validationPattern{
position: relative;
display: inline-block;
}
JavaScript
function regexer(input){
// generate the UI
var gui = $('<div class="validationWindow"><button type="button" class="validator-close-button">X</button><p>VALIDATION<br><select class="validation-main"><option value="" selected="">No Validation</option><option value="1">Custom Validation</option></select></p><p class="" id="ui">RANGE<br><select id="validation_range_type"><option value="">None</option><optgroup label="Static Ranges"><option value="0-9">NUMERIC ONLY (0-9)</option><option value="A-Za-z">ALPHA ONLY (A-Za-z)</option><option value="A-Za-z0-9">ALPHA NUMERIC ONLY (A-Za-z0-9)</option><option value="A-Z">UPPERCASE ALPHA ONLY (A-Z)</option><option value="a-z">LOWERCASE ALPHA ONLY (a-z)</option></optgroup></select><br><br><select id="validation_length_type"><option value="any">Any Number of characters</option><option value="exactly">Exactly</option><option value="atleast">At Least</option><option value="nomorethan">Not More Than</option></select><span class="validation-amount" style="display:none;"><input type="number" value="8" id="validation_length_amount"> CHARACTERS</span></p></div>');
gui.find('button.validator-close-button').click(function(){
gui.hide();
});
gui.find('select#validation_length_type').change(function(){
generateRegEx(gui,input);
if($(this).val() == 'any'){
gui.find('.validation-amount').hide();
} else {
gui.find('.validation-amount').show();
}
});
gui.find('select#validation_range_type').change(function(){
generateRegEx(gui,input);
});
gui.find('input#validation_length_amount').change(function(){
generateRegEx(gui,input);
});
gui.find('select.validation-main').change(function(){
gui.find('#ui').toggleClass('hide');
if(gui.find('#ui').hasClass('hide')){
input.val('');
}else{
generateRegEx(gui,input);
}
});
gui.find('#ui').toggleClass('hide');
...