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?
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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 ConnectWise

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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.