Create Beautiful Word press Admin Form and Validate with Jquery

In This tutorial I will tell you how to create custom wordpress form layout and add client side validation based on Jquery.Wordpress provided css for FORM layout we will use those classes and we will create custom JavaScript validate method to validate form.

You can also check other tutorial of wordpress,

How to Validate Custom forms with jQuery in WordPress


Steps 1:We will create Form layout

'; echo ''; echo' '; echo' '; echo' '; echo ''; echo ''; ?>

Here we are using ‘form-required’ class to denotes require fields.We have added ‘validate()’ method on onsubmit form event.

Step 2:Now we will define javascript method to validate from.

function validate() {
	var flag=0;
	jQuery("#tbl_addsettings tr.form-required").each(function() {
		var id=jQuery(this).find("input").attr('id');
		var value = jQuery('#'+id).val();
		if(value=='' || value=='null'){
			jQuery(this).addClass('form-invalid');
			flag=1;
	}
	});
	if(flag)
	return false;
	else
	return true;
}
function checkValidation(val){
var id=val.id;
var value=val.value;

	if(value && value!=''){
	var par=jQuery('input#'+id).parent().parent();
		jQuery(par).removeClass('form-invalid');
		
		if(id=='user_email'){
			var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
			if( !emailReg.test( value ) ) {
				alert("The e-mail address isn’t correct");
			} 
		}
	}
	
}

Result: