Is there a way to change the focus of a page (and/or have a popup window appear) when a control does not pass validation? For example, if a checkbox at the top of a page is left blank and the Selection & Validation attribute on it is set to Required/Validate, I want the page to change focus to the checkbox after the user clicks the submit button at the bottom of the page. The default behavior seems to be a red box around any controls that do not pass validation. However, if the control is not on the screen at the time the user clicks on the submit button, it appears that nothing happens.

This message has been edited. Last edited by: FP Mod Chuck,

You will need to control yourself the validation of the fields with an onclick event on the Run button.
Then, by catching the possible errors you will be able to stop the execution.

The Selection & Validation attribute available via the Properties utility in HTML Canvas can be set to Required to make sure the page does not submit if a field is blank. A red box appears around controls that have missing data. I was hoping there is a way to set the focus of the page to the first control that did not pass validation.

Now, I am finding that the 'Wait for completion' option is not preventing the execution of a JavaScript call to clear all checkboxes I had triggered by the Submit button. The checkboxes that were missing values are outlined with a red box, but all of the other checkboxes are also emptied when the button is clicked. It may be that I will need to validate each checkbox individually to prevent this? Does anyone have an example of how I might check (I assume using a JavaScript call) that say checkbox1 is not empty?

Doing this will verify the check/uncheck of a checkbox and display a message.
Java script syntax can easily be found with Google search, plenty of samples

 if (MyField0.checked == true)
  alert("MyField is checked");
 else
  alert("MyField is unchecked");

If you combine the Required/Validate setting with custom validation it is almost sure that you will have some execution conflict because you will lay on code executed outside your control and some that you are trying to manage.
It will become a pain.
I suggest that you do one or the other

The solution I arrived at was to use a combination of JavaScript and setting the 'Selection & Validation' attribute to 'Required/no validate.' This does not move the focus of the page to the control with the missing value; but, the JavaScript displays the alert window and the attribute setting highlights the control with the missing value with a red box.

I'm a JavaScript novice, so it took me the longest time to figure out how to identify the individual checkbox options in order to verify that they were all unchecked for a particular control. Once I figured that out, it was a matter of setting up if-then syntax to either display the alert or clear the form, and calling them in the correct order as a Task triggered by a button click.

 
function clearCheckboxes() {
document.querySelectorAll('input[type="checkbox"]').forEach(el=>el.checked = false);
}  

function clearForm() { 
// Checkbox1
var cb10 = document.getElementById("checkbox10").checked;
var cb11 = document.getElementById("checkbox11").checked;
var cb12 = document.getElementById("checkbox12").checked;
var cb13 = document.getElementById("checkbox13").checked;

// Checkbox2
var cb20 = document.getElementById("checkbox20").checked;
var cb21 = document.getElementById("checkbox21").checked;
var cb22 = document.getElementById("checkbox22").checked;
var cb23 = document.getElementById("checkbox23").checked;

if ( (cb10==true || cb11==true || cb12==true || cb13==true) 
  && (cb20==true || cb21==true || cb22==true || cb23==true) {
clearCheckboxes();
}
}

function validate() {
// Checkbox1
var cb10 = document.getElementById("checkbox10").checked;
var cb11 = document.getElementById("checkbox11").checked;
var cb12 = document.getElementById("checkbox12").checked;
var cb13 = document.getElementById("checkbox13").checked;

// Checkbox2
var cb20 = document.getElementById("checkbox20").checked;
var cb21 = document.getElementById("checkbox21").checked;
var cb22 = document.getElementById("checkbox22").checked;
var cb23 = document.getElementById("checkbox23").checked;

if ( (cb10==false && cb11==false && cb12==false && cb13==false) 
  || (cb20==false && cb21==false && cb22==false && cb23==false){
alert("Please check the form for missing values.");
}
}