asked on

Highlight required fields (not yet filled in ones) yellow after validation of form fields

Dear Experts:

below java script assigned to a button checks for empty fields (required ones) in my adobe acrobat form.

I would like to add the following functionality:

All of the required fields that have not been filled in / checked (the app.alert will tell the user) should have a yellow fill so the user can easily see which fields have not been filled in yet.

Help is much appreciated.

Thank you very much in advance.

Regards, Andreas

var emptyFields = [];

for (var i=0; i<this.numFields; i++) {

     var f= this.getField(this.getNthFieldName(i));

     if (f.type!="button" && f.required ) {

          if ((f.type=="text" && f.value=="") || (f.type=="checkbox" && f.value=="Off") || (f.type=="radiobutton" && f.value=="Off")) emptyFields.push(f.name);

     }

}

if (emptyFields.length>0) {

     app.alert("Error! You must fill in the following fields:\n" + emptyFields.join("\n"));

}

Open in new window

Leonidas Dosas

Check this example:

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  <style>
   .cbox{cursor:default;background-color:#ffffff;border:2px solid #ff0000;font-weight:bold;font-size:12px;width:13px;height:13px;color:#369}
  </style>
</head>
<body>
<!-- Start your code here -->

<input type="text" />
<input type="text" />
<input type="text" />
<span class="bigcheck-target"><input type="checkbox" /></span>
<button id="check">Check</button>
  
  <script>
var inputElm=document.getElementsByTagName('input');
var buttonElm=document.getElementById('check');

buttonElm.addEventListener('click',function(){
  for(var i=0;i<inputElm.length;i++){
   
     if(inputElm[i].type==='text' && inputElm[i].value===''){
        inputElm[i].style.backgroundColor = "yellow";       
     }
    if(inputElm[i].type==='checkbox' && !inputElm[i].checked){
      console.log(inputElm[i].parentElement);
       inputElm[i].parentElement.className+=' cbox';
     }
  }
});
  </script>
<!-- End your code here -->
</body>
</html>

Open in new window

Andreas Hermle

ASKER

Hi Leonidas,

thank you very much for your professional help and the time taken. Looks really professional. I am not quite sure whether I can insert this code into my Adobe Acrobat Form. I will give it a try tomorrow.

Thank you very much for it.

Regards, Andreas

Andreas Hermle

ASKER

Hi Leonidas, I am afraid to tell you that I cannot get this code working on my adobe acrobat form

Leonidas Dosas

Andreas could you post all the code of the page?

Andreas Hermle

ASKER

Hi Leonidas,

thank you for your feedback. Actually this is the whole code of the page / adobe form.

Thank you, Regards, Andreas

ASKER CERTIFIED SOLUTION

Andreas Hermle

membership

This solution is only available to members.