# Error Style Class using Global onElementDataChange?

**URL:** <https://forum.servoy.com/t/error-style-class-using-global-onelementdatachange/20435>\
**Category:** Questions\
**Created:** [February 24, 2021, 1:41am UTC](https://forum.servoy.com/t/error-style-class-using-global-onelementdatachange/20435 "2021-02-24T01:41:18Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![john1598360627](https://avatars.discourse-cdn.com/v4/letter/j/439d5e/32.png) [@john1598360627](https://forum.servoy.com/u/john1598360627)\
**Post date:** [February 24, 2021, 1:41am UTC](https://forum.servoy.com/t/error-style-class-using-global-onelementdatachange/20435/1 "2021-02-24T01:41:18Z")

</div>

After watching the 2020.09 presentation, there was a demonstration of how to make it so that a textfield changes into it’s ‘error styleclass’ state, using onElementDataChange.

However, I’m not sure how to apply it to my project. In the demo, the code was something in a file called ‘baseCRUD.js’, however I have some questions related to that.

1. Is this a singular global onElementDataChange for the whole project? So, I could just have one global onElementDataChange? (rather than having to do this for every single form)

And if 1 is true,  
2. Where would this onElementDataChange go? In a form visible to all the other forms/modules, or in the Main Solution? baseCRUD in the demo was in ‘cloudSampleSolution/forms/baseCRUD.js’ , so that’s the Main Solution I’m pretty sure

CODE in Question

```auto
function onElementDataChange(oldValue, newValue, event){
	
	
	// CLEAR STYLE
	var elementName = event.getElementName();
	var field = elements[elementName];
	
	field.removeStyleClass('field-invalid');
	field.removeStyleClass('field-warning');
	field.toolTipText = null;
	
	// VALIDATE
	var markers = databaseManager.validate(
		foundset.getSelectedRecord(),
		{elementName : elementName});
	if(!markers){
		return;
	}
	
	// CHECK MARKERS / RENDER VALIDATION 
	if(markers.hasErrors){
		field.addStyleClass('field-invalid');
		field.toolTipText = markers.getMarkers(LOGGINGLEVEL.ERROR)[0].message;
	}
	// CHECK MARKERS / RENDER VALIDATION 
	var warnings = markers.getMarkers(LOGGINGLEVEL.WARNING);
	if(warnings.length){
		field.addStyleClass('field-warning');
		field.toolTipText = warnings[0].message;
	}
	
	return true;

}

```

---

<div class="post-metadata">

**Author:** ![sdevlin](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/sdevlin/32/4488_2.png) [@sdevlin](https://forum.servoy.com/u/sdevlin)\
**Post date:** [February 26, 2021, 7:21pm UTC](https://forum.servoy.com/t/error-style-class-using-global-onelementdatachange/20435/2 "2021-02-26T19:21:21Z")

</div>

Hi John,

In the webinar, the **onElementDataChange** was implemented in a base form which can be inherited into any form.  
This was also demonstrated using the [SvySample project](https://github.com/Servoy/svySampleSolution) which can be installed from the Servoy Package Manager. (I recommend that you use a _completely_ blank workspace). Only the latest version **v1.1.1** has the validation example, including the baseCRUD.js.

Best,  
Sean