4 Replies Latest reply on Jul 8, 2016 2:33 AM by Reto Zollinger

    red border for empty required fields only

    Reto Zollinger

      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

        • 1. Re: red border for empty required fields only
          maxwyss Level 4

          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.

          • 2. Re: red border for empty required fields only
            Reto Zollinger Level 1

            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.

            • 3. Re: red border for empty required fields only
              alexh90310518 Level 1

              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.

              • 4. Re: red border for empty required fields only
                Reto Zollinger Level 1

                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