Need JS help

[mikeallenbrown]

Web app running 5028-5088.

Sample component...
Validation_test_case.a5wcmp

Screenshot...
Ashampoo_Snap_Thursday, September 27, 2018_07h57m19s_007_.png

Problem...

In the test case component there is a button that runs a JS function. It tests if the user made a selection or not. If no selection I apply the error class. My problem is I can't seem to get to the element. I must have a syntax or process problem but I'm not seeing it. Here's the function ...

function validate() {
	var controlsToValidate = ['Test_1','Test_2','Test_3'];
	var flagHasError = false;
	
	debugger;
	
	for(var i = 0; i < controlsToValidate.length; i++) {
		
		//var controlID = {dialog.componentName}.V.R1. + controlsToValidate[i];
		var ele = document.getElementById('{dialog.componentName}.V.R1.'+ controlsToValidate[i]);
		var control = {dialog.object}.getValue(controlsToValidate[i]);
		
		if(controlsToValidate[i].length == 0){
			if (ele) {
				ele.classList.add('MobGrayEditError'); 
				flagHasError = true;
			}
		} else {
			ele.classList.remove('MobGrayEditError');
		}	
	}
	
	if(flagHasError == true){
		return false;
	} else {
		//No validation errors
		return true;
	}
}

[Sarah Mitchell]

Re: Need JS help

Web app running 5028-5088.

Sample component...
[ATTACH]45306[/ATTACH]

Screenshot...
[ATTACH=CONFIG]45307[/ATTACH]

Problem...

In the test case component there is a button that runs a JS function. It tests if the user made a selection or not. If no selection I apply the error class. My problem is I can't seem to get to the element. I must have a syntax or process problem but I'm not seeing it. Here's the function ...

function validate() {
	var controlsToValidate = ['Test_1','Test_2','Test_3'];
	var flagHasError = false;
	
	debugger;
	
	for(var i = 0; i < controlsToValidate.length; i++) {
		
		//var controlID = {dialog.componentName}.V.R1. + controlsToValidate[i];
		var ele = document.getElementById('{dialog.componentName}.V.R1.'+ controlsToValidate[i]);
		var control = {dialog.object}.getValue(controlsToValidate[i]);
		
		if(controlsToValidate[i].length == 0){
			if (ele) {
				ele.classList.add('MobGrayEditError'); 
				flagHasError = true;
			}
		} else {
			ele.classList.remove('MobGrayEditError');
		}	
	}
	
	if(flagHasError == true){
		return false;
	} else {
		//No validation errors
		return true;
	}
}

Use the {dialog.object}.getPointer() method instead.

[mikeallenbrown]

Re: Need JS help

Yup, that did it. Thank you Sarah.

I still would like to know what I did wrong with my original method. Not because I still want to use it but I just want to better understand where I went wrong with it.

[Davidk]

Re: Need JS help

If that's your actual code then it doesn't really look right. You're testing the length of controlsToValidate[i] which means that one of the values in the controlsToValidate array is expected to be an array.

As it's written, controlsToValidate[i].length == 0 would never be true. If it were ever true, the .getPointer() method and .getValue() method would both blow up with a Javascript error before the code ever got to the test.

Are you trying to validate data in controls? If so, then you could use the control Validation rules property on the control and the {dialog.Object}.clientSideValidateField() method in code.

I would also change the name of your function. "validate" is too dangerous and generic.

[mikeallenbrown]

Re: Need JS help

Thanks David. Using the getPointer method and fixing the code you pointed out solved my problems. And I'll change the name of the function too.

I'm validating this way because the app should only validate the data for certain users.