Validate Form Fields using jQuery

Last Updated: January 28, 2019

function validateField(element, e){

	var restriction = element.attr('data-restriction');
	var errorText = element.attr('data-error-text');
	var required = element.attr('data-required');
	var name = element.attr('name');
	var label = element.siblings('label').html();
	var tagName = element.prop('tagName').toLowerCase();
	var value = element.val();
	

	if (typeof restriction !== 'undefined'){
		if (restriction == 'numeric'){
		    
		    if (typeof e !== 'undefined'){
		        
			    // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                     // Allow: Ctrl+A, Command+A
                    (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) || 
                     // Allow: home, end, left, right, down, up
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                         // let it happen, don't do anything
                         return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            
		    }
		}
	}

    if (required != 'no'){
		switch (tagName){
			case 'input':
				var type = element.attr('type');

				switch (type){

					case 'text':
						if (element.val() == ''){
							element.after('Please enter ' + label + '.');
							element.addClass('invalid');
							element.removeClass('valid');
						}else{
							element.removeClass('invalid');
							element.addClass('valid');
							$('.form-error-' + name).remove();
						}
					break;
					
					
					case 'password':
					    
					    console.log('Password validation');
					 
						if (element.val() == ''){
							element.after('Please enter ' + label + '.');
							element.addClass('invalid');
							element.removeClass('valid');
						}else{
						    
								
						    if (element.hasClass('form-control-re-type-password')){
						        if (element.val() != $('.form-control-password').val()){
						            element.after('Password and Re-type password must match.');
    								element.addClass('invalid');
    								element.removeClass('valid');
						        }else{
						             element.removeClass('invalid');
        								element.addClass('valid');
        								$('.form-error-' + name).remove();
    							    
						        }
						    }else{
						        element.removeClass('invalid');
								element.addClass('valid');
								$('.form-error-' + name).remove();
						    }
						    
							
						}
					break;


					case 'email':
						if (element.val() == '' || !validateEmail(element.val())){
							element.after('Please enter your correct email address.');
							element.addClass('invalid');
							element.removeClass('valid');
						}else{
							element.removeClass('invalid');
							element.addClass('valid');
							$('.form-error-' + name).remove();
						}
					
					break;

				}
				
				var values = 'action=save_process_data_action&request_id=' + requestID + '&key='+ name + '&value=' + value;
	            $.post(site.ajaxURL, values , function(response) {});
			break;

			case 'select':
				if (element.val() == ''){
					element.after('Please choose ' + label + '.');
					element.addClass('invalid');
					element.removeClass('valid');
				}else{
					element.removeClass('invalid');
					element.addClass('valid');
					$('.form-error-' + name).remove();
				}
				
				
			break;
		}
    }
}

Add your feedback or comment below: