JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<input name="newItemVPN" id="newItemVPN" maxlength="48" data-validate-field="true" data-forbiddenChars="'*','|',':','[',']'">
    <input name="newItemVPN2" id="newItemVPN2" maxlength="48" data-validate-field="true" data-forbiddenChars="'*','|',':'">

JavaScript

// :::::::::::::::::::::: Read DOM, search for fields to validate and extract validation info
var doCustomValidation = function(element){
    console.log(element.dataset.forbiddenchars);
    var pattern = element.dataset.forbiddenChars.split(',');
    console.log(pattern);
	pattern = arrayToRegEx(element.dataset.forbiddenchars)
    console.log('wtf');
    console.log(pattern);
	console.log(element.value);
    console.log('test: ');

    if(pattern.test(element.value)){
    	console.log('reject!');    
    }
}

//bind onChange event listener to each one
var bindValidationListener = function(item){
    item.addEventListener('change', function(){
        doCustomValidation(this)
        console.log('yo!');
    });
	//console.log(item.dataset.forbiddenchars);
}

//Get fields to validate
var fieldsToValidate = document.querySelectorAll('[data-validate-field]');
Object.keys(fieldsToValidate).forEach(function(key) {
    bindValidationListener(fieldsToValidate[key]);
});

// :::::::::::::::::::::: Convert Fields to RegEx
var escapeNonAlphaNumeric = function(item, index){
	var notAlphaNumeric = new RegExp('[^a-zA-Z\d\s]');
 	if(notAlphaNumeric.test(item)){
    	item = '\\' + item;
    }
    return item;
}
var arrayToRegEx = function(userArray){
    console.log(userArray);
    var myArray = userArray.map(escapeNonAlphaNumeric);
    //var myArray = userArray.split(',').map(escapeNonAlphaNumeric);
	//myArray = userArray.map(escapeNonAlphaNumeric);
    //myArray = new RegExp('['+myArray.join('')+']');
    return myArray;
}


// Testing Code
var regArray = ['*','|',':',']'];
//var myReg = arrayToRegEx(regArray);

var myString = "This is a string]";
//var goodReg = new RegExp('[*|:]');
//console.log(myReg.test(myString));