Custom Exception handler css/javascript

Hi I have some input widget. I have set it to mandatory. and a button, when I click on that button It will validate all the input widget. But when I add some value to the input has exception I do not want to see the validate message. 

Like this after click button I see the required field, but when i put 1000 to the input so I want to delete that message.

Anyone can help me, I have try some but It does not work.

Thanks


Hi,

Just add this on your Input Field in Extended properties :


So after the Validation Error Message the moment you start typing in it, the validation message will be removed.

Solution

Hi Dat Bui,

I tried to frame the solution for the above mentioned scenario and below is my approach:


1) In React Web application - Just add an OnChange event handler and within the Handler action flow, update the run-time valid property of the respective input control to True. On updating the run-time valid property of the input control the validation message will get removed automatically (it get reflected instantly).




Check this: https://sbsam.outsystemscloud.com/ReactiveTestApp/POC?_ts=637196105663997853

2) In Traditional Web application

Approach 1- Add an OnChange handler on the input widget and in the respective handler action flow, update the input control valid dynamic property to True and use the Ajax refresh node to refresh the input control.



Approach 2:

Using JavaScript:  Define the JS function on Screen Level and call the respective function on  onkeypress event of the respective input widget


SyntaxEditor Code Snippet

function RemoveErrorMessage(el) {
    
    var elementId = el.id;
    var elementHook = document.getElementById(elementId);
    
    if(elementHook.classList.contains('Not_Valid')) // check whether the current element contains class 'Not_Valid'
    {
        elementHook.classList.remove('Not_Valid');
        elementHook.nextSibling.style.display = 'none';
    // $('#' + elementId).next('span').hide(); // using jQuery
    }
}


 

check this: https://sbsam.outsystemscloud.com/UI_SampleApp/POC.aspx


Hope this helps you!


Thanks & Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Dat Bui,

I tried to frame the solution for the above mentioned scenario and below is my approach:


1) In React Web application - Just add an OnChange event handler and within the Handler action flow, update the run-time valid property of the respective input control to True. On updating the run-time valid property of the input control the validation message will get removed automatically (it get reflected instantly).




Check this: https://sbsam.outsystemscloud.com/ReactiveTestApp/POC?_ts=637196105663997853

2) In Traditional Web application

Approach 1- Add an OnChange handler on the input widget and in the respective handler action flow, update the input control valid dynamic property to True and use the Ajax refresh node to refresh the input control.



Approach 2:

Using JavaScript:  Define the JS function on Screen Level and call the respective function on  onkeypress event of the respective input widget


SyntaxEditor Code Snippet

function RemoveErrorMessage(el) {
    
    var elementId = el.id;
    var elementHook = document.getElementById(elementId);
    
    if(elementHook.classList.contains('Not_Valid')) // check whether the current element contains class 'Not_Valid'
    {
        elementHook.classList.remove('Not_Valid');
        elementHook.nextSibling.style.display = 'none';
    // $('#' + elementId).next('span').hide(); // using jQuery
    }
}


 

check this: https://sbsam.outsystemscloud.com/UI_SampleApp/POC.aspx


Hope this helps you!


Thanks & Regards,

Benjith Sam

Hi Benjith, Thanks for helping me. It work!


Dat Bui wrote:

Benjith Sam wrote:

Hi Dat Bui,

I tried to frame the solution for the above mentioned scenario and below is my approach:


1) In React Web application - Just add an OnChange event handler and within the Handler action flow, update the run-time valid property of the respective input control to True. On updating the run-time valid property of the input control the validation message will get removed automatically (it get reflected instantly).




Check this: https://sbsam.outsystemscloud.com/ReactiveTestApp/POC?_ts=637196105663997853

2) In Traditional Web application

Approach 1- Add an OnChange handler on the input widget and in the respective handler action flow, update the input control valid dynamic property to True and use the Ajax refresh node to refresh the input control.



Approach 2:

Using JavaScript:  Define the JS function on Screen Level and call the respective function on  onkeypress event of the respective input widget


SyntaxEditor Code Snippet

function RemoveErrorMessage(el) {
    
    var elementId = el.id;
    var elementHook = document.getElementById(elementId);
    
    if(elementHook.classList.contains('Not_Valid')) // check whether the current element contains class 'Not_Valid'
    {
        elementHook.classList.remove('Not_Valid');
        elementHook.nextSibling.style.display = 'none';
    // $('#' + elementId).next('span').hide(); // using jQuery
    }
}


 

check this: https://sbsam.outsystemscloud.com/UI_SampleApp/POC.aspx


Hope this helps you!


Thanks & Regards,

Benjith Sam

Hi Benjith, Thanks for helping me. It work!



Hi Dat Bui,


Happy to hear that it helped you :)


Thanks & Regards,

Benjith Sam