Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

red border for empty required fields only

New Here ,
Jul 06, 2016 Jul 06, 2016

Hi

i’m creating a form with required fields and checkboxes. A warning shows up, in case some fields were left empty.

Everything worked fine so far by adding this already posted code to the "submit button“:

var emptyFields = []; 

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

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

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

        emptyFields.push(f.name); 

    } 

 

if (emptyFields.length>0) { 

    app.alert("Bitte füllen Sie die leeren Felder aus:\n" + emptyFields.join("\n")); 

} else this.mailDoc({cTo: „my@email.ch"}); 

now i’d like to show the user with a red border, which required fields are still empty, in case the user missed one or more.

In addition, is it possible to let the red border hide, while inserting text?

many thanks for your help

reto

TOPICS
Acrobat SDK and JavaScript
7.2K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Advocate , Jul 07, 2016 Jul 07, 2016

There are various approaches…

If the fields are text fields, you could, for example run a Format script in each of the affected fields:

if (event.value !== event.target.defaultValue) {

event.target.strokeColor = color.transparent ;

} else {

event.target.strokeColor = color.red ;

}

This would not even require a validation. If you want to have the validation when submitting, you could set the border while you run the loop, and add

f.strokeColor = color.red

after you push the name into the test array. And u

...
Translate
Advocate ,
Jul 07, 2016 Jul 07, 2016

There are various approaches…

If the fields are text fields, you could, for example run a Format script in each of the affected fields:

if (event.value !== event.target.defaultValue) {

event.target.strokeColor = color.transparent ;

} else {

event.target.strokeColor = color.red ;

}

This would not even require a validation. If you want to have the validation when submitting, you could set the border while you run the loop, and add

f.strokeColor = color.red

after you push the name into the test array. And use the shortened version of the format script above

if (event.value !== event.target.defaultValue) {

event.target.strokeColor = color.transparent ;

}

And that should do it.

However, note that this works with fields set to "required" only when the user has deactivated the highlight fillable fields option. When that option is on, fields marked as required always appear with a red border, and the code shown above can not override it.

Hope this can help.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 07, 2016 Jul 07, 2016

Hi

thanks for your answer! I'm not sure, if i get it right. I inserted the code to the fields. afterwards the red border only appeared when clicking into the field, typing something, then delete it...

if possible i'd like to press the submit button and after the warning all empty/unfilled required fields are marked with a red border.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jul 07, 2016 Jul 07, 2016

I have something a little similar in my form only I use a slightly different workflow.

In the beginning I have all the required fields set to required.

Properties>General>Required(Yes)

This gives them the red border from the beginning (With a side notation on the document stating that required fields are highlighted in red).

Then I have in the text fields properties, actions tab

On Blur>Run a JavaScript;

var fldReq = this.getField("Text1");

if (fldReq.value !== "") {  //if field is not empty

     fldReq.required = false;  //field required is false

}

else {  //if field is empty

     fldReq.required = true;  //field required is true

}

This way people opening my document know straight away which are required and which are not.

They can also then flick back through the document before submitting and see if any required fields remain.

(Removing the required parameter removes the red border)

Then I simply check for any required fields in my document before they can submit it.

var arrReq = [];

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

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

     if (fldAll == null)continue;

          if (fldAll.type !== "button") {

               if (fldAll.required == true) {

                    arrReq.push(fldAll);

          }

     }

}

if (arrReq.length !== 0) {

  app.alert("Please fill in all required fields (Marked red) before proceeding");

}

else if (arrReq.length == 0) {

     //do something else

}

It's may not be exactly what you want but I find it to be quite effective.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 08, 2016 Jul 08, 2016
LATEST

Hi

thanks for your answer! Your suggestion finally let me understand the anwer of maxwyss!

i put this code into the required textfields:

action> field deactivated>

if (event.value !== event.target.defaultValue) {

event.target.strokeColor = color.transparent ;

} else {

event.target.strokeColor = color.red ;

}

the code of the submit button i modified to:

var emptyFields = []; 

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

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

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

        emptyFields.push(f.name); 

f.strokeColor = color.red

    }  if (event.value !== event.target.defaultValue) {

event.target.strokeColor = color.transparent ;

    }

 

if (emptyFields.length>0) { 

    app.alert("Bitte füllen Sie die leeren Felder aus:\n" + emptyFields.join("\n")); 

} else this.mailDoc({cTo: "my@email"}); 

now it behaves exactly the way i want. when leaving a required field empty (after click into the field) a red border shows up.

in case the user wants to submit the form but still left empty fields, a warning shows up and all empty (required) fields are red marked.

thank you very much!

reto

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines