Validation form inputs JS

validation_JS.txt

####### REQUIRE JQUERY #########

//============== USAGE EXEMPLE ===================

var formRegister = 'form#register';

//validate the requiered fields and validate fields
var formInputs = validate_inputs(formRegister + ' input');

// //Check if all the requiered fields are equal to the validated fields and that there's no error fields
if(formInputs.validated.length == formInputs.required.length && !$(formRegister + ' input').hasClass('error_input')){

	//everithing is validated do something
}

//============== HTML ====================

<div class="inputs">
	<label>Label <span class="required">*</span></label>
	<input type="text" name="name_of_input" placeholder="Placeholder input" data-required="true" data-regex="regex_type" />	
	<span class="error">Error message for the input</span>
</div>

//============== CSS =====================

form {
	position: relative;
	top: 0;
	left: 0;
}

form .inputs {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  margin-top: 10px;
}

form input {
	outline: none;
}

form span.error {
  display: none;
  position: absolute;
  padding: 8px 5px;
  width: 100%;
  color : red;
  font-size: 13px;
}

form .inputs input.error_input {
  border: 1px solid red;
}

form .inputs input.success_input {
  border: 1px solid green;
}

form .inputs label{
  display: block;
  position: relative;
  top: 0;
  left:0;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #404041;
}



//============== JS =====================

//Regex Object for validation case
var regex = {
	email : /^(\w+(\.|\-)?)*\w+@{1}(\w+\.{1})+[a-zA-Z]+$/,
	address : /^(\w+\s?|\-?)+$/,
	number : /^\d+$/,
	name : /^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]+$/,
	name_number : /^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð& ,.'-\d*]+$/,
	phone : /^(\d\-?)?\(?\d{3}\)?\s?\-?\d{3}\s?\-?\d{4}$/,
	postal_code : /^[a-zA-Z]\d[a-zA-Z](\s|\-)?\d[a-zA-Z]\d$/,
	account_number : /^\d{6,7}$/
};

/**
 * ============== CHECK INPUT BEFORE SUBMIT ===============
 * check the value before procceding to submit
 * @param  Array inputs of all input in the form ex : $(form input)
 * @return Array  of required field and validated field to compare if it's equal and match for submit
 */
function validate_inputs(inputs){
	var validated = new Array();
	var required  = new Array();

	$(inputs).each(function(index) {
		if($(this).data('required')){
			required.push(index);
			valid(this, regex[$(this).data('regex')]);
		}
		if($(this).hasClass('success_input')){
			validated.push(index);
		}
	});

	var elems = {
		'validated' : validated,
		'required' : required
	}
	return elems;
}

/**
 * ============== VALIDATE INPUT ================
 * Validate field base on Regex and required fields
 * @param  Selector selector jQuery Class or ID $('.xxx') or  $('#xxxx') selector
 * @param  Regex regExp  value of the RegEx value in the data attribute
 */
function valid(selector, regExp) {
	var selector = $(selector);
	if (selector.val().match(regExp) 
	&& selector.val() != '' 
	&& selector.val() != selector.attr('value')){
	
		selector.removeClass('error_input').addClass('success_input');
		selector.next().css('display', 'none');

	}else{
		selector.removeClass('success_input').addClass('error_input');
		selector.next().css('display', 'block');
	}
}


$('input:text').change(function(){
	if($(this).data('required')){
		valid(this, regex[$(this).data('regex')]);
	}
});