Jump to content
  • 0

Display Error message



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 !


Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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 :) 


Link to comment
Share on other sites

  • 0

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.';

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 :)


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...