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

Andreas HermleTeam leaderAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
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

0
Andreas HermleTeam leaderAuthor Commented:
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
0
Andreas HermleTeam leaderAuthor Commented:
Hi Leonidas, I am afraid to tell you that I cannot get this code working on my adobe acrobat form
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Leonidas DosasCommented:
Andreas could you post all the code of the page?
0
Andreas HermleTeam leaderAuthor Commented:
Hi Leonidas,

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

Thank you, Regards, Andreas
0
Andreas HermleTeam leaderAuthor Commented:
Hi Leonidas,

In the meantime I found out myself. Here is the code:

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.valueAsString==f.defaultValue) {
            emptyFields.push(f.name);
            f.fillColor = color.yellow;
        } else f.fillColor = color.transparent;
     }
}
 

if (emptyFields.length>0) {
    app.alert("Error! You must fill in the following fields:\n" + emptyFields.join("\n"));
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Andreas HermleTeam leaderAuthor Commented:
I found out myself and it works great.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Acrobat

From novice to tech pro — start learning today.