Display Error message

[FinTheHuman]

Hi Guys,

I have a form with a-lot of fields and some of them are required. Then if I have a required fields without value when I hit submit, the error message is displayed in the Header.

How can I also display the error message in the Footer? For the user don't have to scroll all the way up to see the error. 

Thank you for the help !

 

[Aether]

Hello @FinTheHuman,

Here some alternative solution. 
For you to be able to show the error massage in the Header and Footer of your DataPage form with the use of the standard feature of Caspio, just follow this steps:

1. Create an another section and add a HTML Block under it then type the error message: http://prntscr.com/lqviqj
2. Add a new conditional rule in the rules tab: http://prntscr.com/lqvjy2
3. Select all the required field and choose "is not blank" in the operetor section: http://prntscr.com/lqvkky
4. And in the Action, choose hidden and select the section you created: http://prntscr.com/lqvkzs
5. Then choose match all criteria (AND). It should be like this: http://prntscr.com/lqvlnp

In this process, the error message is displayed in the Footer until all the required field in filled-up with value. 

I hope this helps  

~WatashiwaJin~

[Aether]

Hi @FinTheHuman,

You can also try using this JavaScript code in displaying the Error massage below the form when the all the required field do not contain any values after submission:

<div data-cb-name="FooterErrorMsg" class="cbFormError" id="error"></div>
<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

document.getElementsByName('Submit')[0].onmouseover = function(){
var PN = document.getElementById('InsertRecordProjectName').value;
var t1 = document.getElementById('InsertRecordtest1').value;
var t2 = document.getElementById('InsertRecordtest2').value;
var t3 = document.getElementById('InsertRecordtest3').value;

if(PN == "" || t1 == "" || t2 == "" || t3 == "" ){  

document.getElementById("error").innerHTML='Values in one or more fields are invalid.';
}
};
});
</script>

You can change the name of the field and get there id in the HTML browser console, check the steps in the screenshot below: 

I hope this helps

~WatashiwaJin~