Javascript: Validaciones de campos (DynamicForm 1.2)

Hola, esta semana intentaré ir mejorando y añadiendo funcionalidad a nuestro “componente” DynamicForm. En esta entrega, he añadido a nuestro XML de definición, una serie de reglas de validación de campos. De esta manera nuestro formulario que ya validaba y ocultaba campos, además validará con reglas el contenido introducido en los mismos.

El resumen de la funcionalidad propuesta hoy es el siguiente:

Formulario: Cuenta
Evento: OnLoad(), OnChange() y OnSave()
Atributos: para este ejemplo, el desplegable de Categoría.
Funcionalidad: Además de la funcionalidad que ya se disponía, he añadido validaciones de introducción de campos numéricos y de tipo email. En los numéricos además se controla que no se puedan escribir campos que no sean numéricos. Por último no se permite guardar el formulario en caso de que alguna validación falle. en este ejemplo en el campo “Número de Cuenta” solo se podrán introducir números y en el nombre de la dirección un campo con formato de Email.

Todo este ejemplo estará como siempre disponible en Codeplex:

http://elblogdedynamicscrm.codeplex.com/documentation

Para estas nuevas funcionalidades, he tenido que hacer el XML de configuración, algo mas completo:

	
		
		
	
	
			showattributes="primarycontactid,accountnumber" hideattributes="" 
		showsections="general/address,general/shipping information" hidesections="" 
		showtabs="notes and activities,administration" hidetabs="" 
		setrequiredlevel="required:fax-address1_city,recommended:address1_name"/>
			hideattributes="primarycontactid,accountnumber" showsections="" 
		hidesections="general/address,general/shipping information"
		showtabs="" hidetabs="notes and activities,administration"
		setrequiredlevel="none:fax-address1_city-address1_name-websiteurl"/>
	

En esta versión he hecho una serie de cambios en el XML mejorando su estructura:

• Añadido un nodo nuevo “Root” que agrupa toda la definción



• Nuevo nodo de “validations” que incluye los campos y los tipos a validar

La función de validaciones es la siguiente:

function Validations(ExecutionObj)
{
	form_validation=true;
	LoadXmlWebResource("new_new_test_xml");
	//Validations
	var nodePath = "//Root/validations/validation";
	var nodelist = doc.selectNodes(nodePath);
	for (var i = 0; i < nodelist.length; i++) 
	{
		var attributes=nodelist(i).attributes;
		var attributename= attributes.getNamedItem("attributename").nodeValue;
		var type= attributes.getNamedItem("type").nodeValue;
		var RegEx= attributes.getNamedItem("RegEx").nodeValue;
		switch (type)
		{
			case "number":
				//var control=document.getElementById(attributename);
				//control.attachEvent("onkeyup",ValidateNumberCharacters);
				document.getElementById(attributename).onkeypress = ValidateNumberCharacters;
				form_validation=ValidateFieldNumber(attributename);
				break;
			case "email":
				form_validation=ValidateFieldEmail(attributename);
				break;
		}
	}
	if (!form_validation && ExecutionObj!=null)
	{
		ExecutionObj.getEventArgs().preventDefault();
		return false;
	}
	return true;
}

Este trozo de código, lee el XML definido, y realiza las validaciones correspondientes.

Finalmente, si alguno de las validaciones de campos ha fallado, se impide guardar el formulario con un ExecutionObj.getEventArgs().preventDefault();.

Para hacer la validación en el OnSave(), se debe llamar a esta función pasándole el contexto (ExecutionObj) como lo siguiente:

Los métodos comunes para las validaciones son los siguientes:

function ValidateNumberCharacters () 
{ 
	var key = event.keyCode; 
	if(!(((key >= 48) && (key <= 57)) || key == 45 || 
		key == 46 || key == 32 || key == 40 || key == 41)) 
	{ 
		return false; 
	}
}   
function ValidateField (fieldName, RegEx) 
{
	var regularExpression = RegEx;
	try {
		var control = getControl(fieldName);
		var fieldValue = getValue(fieldName);
		if (fieldValue=="") return true;
		if (regularExpression.test(fieldValue) == false) {
			alert("Debe introducir el campo " + control.getLabel() 
				+ " en el formato adecuado.");
		return false;
		}
		return true;
	}
	catch (e) {
		alert('Field validation failed with exception ' + e.Message);
		return false;
	}
}
function ValidateFieldNumber  (fieldName) {
	var number = /(^-?\d\d*$)/;
	return ValidateField(fieldName,number);
}
function ValidateFieldEmail  (fieldName) {
	var email = /(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|
		(^[a-z]([a-z_\.]*)@([a-z_\.]*)(\.[a-z]{3})(\.[a-z]{2})*$)/i;
		return ValidateField(fieldName,email);
}

Los métodos añadidos son:

• ValidateNumberCharacters:



• ValidateField



• ValidateFieldNumber



• ValidateFieldEmail

Las validaciones de campos se realizan por medio de Expresiones Regulares (“RegEx”).

Además de estos cambios, he realizado cambios en el método principal “DynamicForm”.

En Codeplex, además de subir el código fuente del Javascript, he subido también la solución completa, para que sea mas fácil implementarla.

La solución contiene:

Espero les guste, seguiré avanzando con estas funcionalidades.