JSFiddle - React, Tailwind, and code Playground
by mowglisanu
JavaScript
$.fn.validateForm = function(){
emrx = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
this.each(function(){
$(this).on('submit', submitFunc);
$elements = $(this).find('input,textarea')
.add($('[form="'+$(this).attr('id')+'"]').flter('input,textarea'));
$elements.filter('input[type="text"],input[type="password"],input[type="email"],input[type="search"]input,[type="tel"],'+
'input:not([type]),textarea').on('blur', textBlur);
$elements.filter('input[type="date"],input[type="time"],input[type="datetime"],input[type="datetime-local"],'+
'input[type="month"],input[type="week"]').on('blur', dateBlur);
$elements.filter('input[type="number"],input[type="range"]').on('blur', numBlur);
$elements.filter('input[type="url"]').on('blur', urlBlur);
$elements.filter('input[type="color"]').on('blur', colourBlur);
});
function textBlur(){
var $this = $(this);
var value = $this.val();
if (value == ''){
if ($this.is('[required]')){
showPopup($this, 'This field is required');
return;
}
}
else{
if ($this.is('[pattern]')){
var pattern = new RegExp('^'+$this.attr('pattern')+'$');
if (!pattern.test(value)){
showPopup($this, 'Enter valid text');
return;
}
}
} $this.removeAttr('data-vf-state');
}
function dateBlur(){
}
function numBlur(){
}
function urlBlur(){
}
function colourBlur(){
var $this = $(this);
var value = $this.val();
...