JSFiddle - React, Tailwind, and code Playground

by Eric Pereira

HTML

<div id="errorContainer">
	<div>The following field have errors:</div>
	<div id="errorMessages"></div>
</div>
<br /><br />
<input type="text" name="name" id="name" />
<br /><br />
<input type="email" name="email" id="email" />
<br /><br />
<input type="number" name="number" id="number" />
<br /><br />
<select name="select" id="select">
	<option></option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
</select>
<br /><br />
<select name="select-multiple" id="select-multiple" multiple>
	<option></option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
	<option>Option 4</option>
	<option>Option 5</option>
	<option>Option 6</option>
</select>
<br /><br />
<input type="radio" name="radio" />Yes
<input type="radio" name="radio" />No
<br /><br />
<input type="checkbox" name="checkbox" />Yes
<input type="checkbox" name="checkbox" />No
<br /><br />
<input type="checkbox" name="checkbox-single" id="checkbox-single" />No
<br /><br />
<textarea name="multiple-emails" id="multiple-emails"></textarea>
<br /><br />
<button id="submit">Submit</button>

CSS

#errorContainer { color: #ff0000; }

JavaScript

jQuery(document).ready(function() {
	jQuery('#submit').click(function(){
		var options = {
			'name' : {
				required: true
			},
			'email' : {
				required: true,
				email: true
			},
			'number' : {
				required: true,
				digits: true
			},
			'select' : {
				required: true
			},
			'select-multiple' : {
				required: true
			},
			'radio' : {
				required: true
			},
			'checkbox' : {
				required: true
			},
			'checkbox-single' : {
				required: true
			},
			'multiple-emails' : {
				required: true,
				multipleEmails: true
			}
		};
	
		if(customValidation(options)){
			alert('Form validated!');
		}else{
			alert('Form not validated!');
		}
	});
});

function customValidation(options){
	var fieldsValid = true;
	var errorMessages = jQuery('#errorMessages');
	
	jQuery.each(options, function(elementIdorName, rules){
		var element = (jQuery('#' + elementIdorName).length) ? jQuery('#' + elementIdorName) : jQuery('input[name=' + elementIdorName + ']:first');
		var elementType = element.prop('type');
		var elementName = element.prop('name');
		
		var elementValid = true;
		
		// First remove any validation errors
		jQuery('.error-' + elementName).hide();
		
		jQuery.each(rules, function(rule, ruleOption){
			// Required
			if(rule == 'required' && ruleOption == true){
				// Select
				if(elementType && (elementType.toLowerCase() === 'select' || elementType.toLowerCase() === 'select-one' || elementType.toLowerCase() === 'select-mulitple')){
					var val = element.val();
					if(val && val.length > 0){
						// Do nothing
					}else{
						elementValid = false;
					}
				}
				
				// Checkbox and Radio
				if((/radio|checkbox/i).test(elementType)){
					if(jQuery('input[name=' + elementName + ']:checked').length > 0){
						// Do nothing
					}else{
						elementValid = false;
					}
				}
				
				// Text, Email, Number and Textarea
				if(jQuery.trim(element.val()).length > 0){
					// Do nothing
				}else{
					elementValid =...