Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] HTML Canvas Control Validation
Go
New
Search
Notify
Tools
Reply
  
[CLOSED] HTML Canvas Control Validation
 Login/Join
 
Member
posted
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,


WebFOCUS 8.2.06, Windows
 
Posts: 20 | Registered: July 18, 2019Reply With QuoteReport This Post
Virtuoso
posted Hide Post
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.


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
 
Posts: 2370 | Location: Montreal Area, Qc, CA | Registered: September 25, 2013Reply With QuoteReport This Post
Member
posted Hide Post
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.


WebFOCUS 8.2.06, Windows
 
Posts: 20 | Registered: July 18, 2019Reply With QuoteReport This Post
Member
posted Hide Post
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?


WebFOCUS 8.2.06, Windows
 
Posts: 20 | Registered: July 18, 2019Reply With QuoteReport This Post
Virtuoso
posted Hide Post
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


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
 
Posts: 2370 | Location: Montreal Area, Qc, CA | Registered: September 25, 2013Reply With QuoteReport This Post
Member
posted Hide Post
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.");
}
}



WebFOCUS 8.2.06, Windows
 
Posts: 20 | Registered: July 18, 2019Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] HTML Canvas Control Validation

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.