Expand my Community achievements bar.

Conditional Required Fields

Avatar

Level 4

I have created a form with several subforms that are hidden and set to Optional in the Object palette and become visible based on the user's choice in a dropdown list. I've read in the forum about the javascript for this. It looks like this:

if (xfa.event.newText == "Maternity" || xfa.event.newText == "Family"){
    SubformField.mandatory = "error"

     SubformField.mandatoryMessage = "This field is required.";
} else {
    SubformField.mandatory = "disabled"
}

So I set up a script for one dropdown choice, this way:

if (xfa.event.newText == "Maternity"){
    MaternitySubform.presence = "visible";
    maternityLastDayWorkedDate.mandatory = "error";
    maternityFirstDayLeaveDate.mandatory = "error";
    maternityReturnDateDate.mandatory = "error";
    maternityNumWeeksDdl.mandatory = "error";
    maternityLastDayWorkedDate.mandatoryMessage = "The Last Day Worked field is mandatory!";
    maternityFirstDayLeaveDate.mandatoryMessage = "The First Day of Leave field is mandatory!";
    maternityReturnDateDate.mandatoryMessage = "The Return Date field is mandatory!";
    maternityNumWeeksDdl.mandatoryMessage = "The Number of Weeks field is mandatory!";
} else {
    MaternitySubform.presence = "hidden";
    maternityLastDayWorkedDate.mandatory = "disabled";
    maternityFirstDayLeaveDate.mandatory = "disabled";
    maternityReturnDateDate.mandatory = "disabled";
    maternityNumWeeksDdl.mandatory = "disabled";
}

This doesn't work. The fields are not outlined in red as required, and after clicking the Submit by Email button, I should see the messages, and these fields should be outlined in red and highlighted in light red.

For some reason, the following script does work.

if (xfa.event.newText == "Maternity" || xfa.event.newText == "Medical/Disability" || xfa.event.newText == "Worker's Compensation Disability" || xfa.event.newText == "Family"){
    drCertDdl.presence = "visible"
    drCertDdl.mandatory = "error";
    drCertDdl.mandatoryMessage = "The Doctor's Certification field is mandatory!";
} else {
    drCertDdl.presence = "hidden";
    drCertDdl.mandatory = "disabled";
}

Any suggestions on how to set these fields to mandatory based on the user's choice would be most welcome! I've included all the scripting for the dropdown below, in case that helps.

form1.#subform[0].ReasonDdl::change - (JavaScript, client)
if (xfa.event.newText == "Maternity"){
    MaternitySubform.presence = "visible";
} else {
    MaternitySubform.presence = "hidden";
}

if (xfa.event.newText == "Family" ){
    FamilySubform.presence = "visible"
} else {
    FamilySubform.presence = "hidden"
}

if (xfa.event.newText == "Medical/Disability" ){
    medicalSubform.presence = "visible"
} else {
    medicalSubform.presence = "hidden"
}

if (xfa.event.newText == "Worker's Compensation Disability" ){
    workersCompSubform.presence = "visible"
} else {
    workersCompSubform.presence = "hidden"
}

if (xfa.event.newText == "Military" ){
    militarySubform.presence = "visible"
} else {
    militarySubform.presence = "hidden"
}

if (xfa.event.newText == "Personal" ){
    personalSubform.presence = "visible"
} else {
    personalSubform.presence = "hidden"
}

if (xfa.event.newText == "Maternity" || xfa.event.newText == "Medical/Disability" || xfa.event.newText == "Worker's Compensation Disability" || xfa.event.newText == "Family"){
    drCertDdl.presence = "visible"
    drCertDdl.mandatory = "error";
    drCertDdl.mandatoryMessage = "The Doctor's Certification field is mandatory!";
} else {
    drCertDdl.presence = "hidden";
    drCertDdl.mandatory = "disabled";
}

16 Replies

Avatar

Level 10

When you make the fields as mandatory at runtime based on another fields in put, you may need to set the border to red using script (if that is your requirement).

When you set the field's mandatory property to "error", the Submit button will display a message that some of the required fields are missing input. If that is not happening in your form, there might be something missing..

If you cans end the form to LiveCycle9@gmail.com I can have a look at it..

Thanks

Srini

Avatar

Level 10

Just as an aside, a switch() statement can be a lot easier to deal with than a long string of if/else.

So the following:

Can be done like this:

switch(xfa.event.newText)

{

     case "Maternity":

          MaternitySubform.presence = "visible";

          break;

     case "Family":

          FamilySubform.presence = "visible";

          break;

     case "Medical/Disability":

          medicalSubform.presence = "visible";

          break;

     //etc...

     default:

          //Any default code you want to run

}

Avatar

Level 4

Jono,

Thank you for your suggestion, which I tried, like this.

switch (xfa.event.newText){
    case "Maternity":
          MaternitySubform.presence = "visible";
          break;

    case "Family":
          FamilySubform.presence = "visible";
          break;
         
    case "Medical/Disability":
          medicalSubform.presence = "visible";
          break;

    case "Worker's Compensation Disability":
            workersCompSubform.presence = "visible";
            break;

    case "Military":
            militarySubform.presence = "visible";
            break;

    case "Personal":
            personalSubform.presence = "visible";
            break;
}

The problem is that once a subform becomes visible, it never becomes hidden again, if the user changes the selection in the dropdown list. The result is that all the fields pile up on top of one another. Is there a way to get around this?

Avatar

Level 10

Try this way..

MaternitySubform.presence = "hidden";
FamilySubform.presence = "hidden";

medicalSubform.presence = "hidden";
workersCompSubform.presence = "hidden";
militarySubform.presence = "hidden";
personalSubform.presence = "hidden";


switch (xfa.event.newText){
    case "Maternity":
          MaternitySubform.presence = "visible";
          break;


    case "Family":
          FamilySubform.presence = "visible";
          break;
         
    case "Medical/Disability":
          medicalSubform.presence = "visible";
          break;


    case "Worker's Compensation Disability":
            workersCompSubform.presence = "visible";
            break;


    case "Military":
            militarySubform.presence = "visible";
            break;


    case "Personal":
            personalSubform.presence = "visible";
            break;
}

Thanks

Srini

Message was edited by: Srini Dhulipalla

Avatar

Level 10

Srini beat me to it - I was going to suggest the same.

Avatar

Level 4

Thank you both! Srini's suggestion works perfectly!

Avatar

Level 4

The fields should already be highlighted, since I enabled that in Form Validation settings, and all the other fields do become highlighted when the user clicks Submit. So these conditional required fields are not being set to mandatory, for some reason.

Avatar

Level 4

Srini,

We got sidetracked by the visibility and the switch---case method. Now about the required fields, I haven't succeeded in making hidden fields required when they are visible. I've tried several possibilities. First, I added lines to the case statements. Then I tried adding to the change or exit events of the dropdown list. I also tried the same code on the submit button. I added some background color changes so that I could see changes.

if (this.rawValue == "Maternity"){

testField.mandatory = "error";

testField.mandatoryMessage = "This field is mandatory!";
// Change the color of the fillable area of the text field.
    xfa.resolveNode("testField.ui.#textEdit.border.edge").stroke = "solid";
    xfa.resolveNode("testField.ui.#textEdit.border.fill.color").value = "255,128,128";
}

else {
testField.mandatory = 'disabled';
// Change the color of the fillable area of the text field.
    xfa.resolveNode("testField.ui.#textEdit.border.edge").stroke = "lowered";
    xfa.resolveNode("testField.ui.#textEdit.border.fill.color").value = "255,255,255";
}

Or

switch (xfa.event.newText){
    case "Maternity":
          MaternitySubform.presence = "visible";
          drCertDdl.presence = "visible";
          maternityLastDayWorkedDate.validate.nullTest = "error";
          drCertDdl.validate.nullTest = "error";
          break;

I must be missing something basic because the information I find in the forums makes this sound like a pretty simple thing. Can you point out where I'm off the track?

Thank you for your help.

Avatar

Level 10

I'm not sure what you are running into.

I just tried a simple test with a couple of dropdowns, one using an if statement and the other using a switch statement and both work fine.

You mentioned Form Validation settings earlier on, are you using version 9? I'm still on 8.2. Possible bug?

Avatar

Level 4

That's a good point. I'm using ES2, but I have

version 8 also. Let me try that and see what the difference is. Thank you for your suggestion.

I'll post the results this afternoon.


Avatar

Level 4

I used the code below with the same results. I have one dropdown list, two text fields, and an email submit button. The list and one textfield are required, and one is set to hidden and optional. The hidden field, when it is visible, isn't highlighted, and there's no error message.

form1.#subform[0].DropDownList1::change - (JavaScript, client)
if (xfa.event.newText == "first" || xfa.event.newText == "second"){
    textSubform.presence = "visible";
    TextField1.mandatory = "error";
    app.alert("Please enter a value in the text field.");
    // Change the color of the fillable area of the text field.
    xfa.resolveNode("TextField1.ui.#textEdit.border.edge").stroke = "solid";
    xfa.resolveNode("TextField1.ui.#textEdit.border.fill.color").value = "255,128,128";
} else {
    textSubform.presence = "hidden";
    // Change the color of the fillable area of the text field.
    xfa.resolveNode("TextField1.ui.#textEdit.border.edge").stroke = "lowered";
    xfa.resolveNode("TextField1.ui.#textEdit.border.fill.color").value = "255,255,255";
}

Avatar

Level 4

I re-read the columns in that link I mentioned, and the javascript equivalents should work.

JavaScript-equivalent in LiveCycle Designer ES

Could you send me an example of code that works for you?

Avatar

Level 4

Below is the XML for a test form. The script on the change event of the dropdown list looks like this:

form1.#subform[0].DropDownList1::change - (JavaScript, client)
if (xfa.event.newText == "first" || xfa.event.newText == "second"){
    textSubform.presence = "visible";
    TextField1.validate.nullTest = "error";
} else {
    textSubform.presence = "hidden";
    TextField1.validate.nullTest = "disabled";
}

and it doesn't work. I've also tried

TextField1.mandatory = "error";

with the same result, in both ES 8.2 and ES2.

<?xml version="1.0" encoding="UTF-8"?>
<?xfa generator="AdobeLiveCycleDesignerES_V8.2.1.4029.1.523496" APIVersion="2.8.9029.0"?>
<xdp:xdp xmlns:xdp="http://ns.adobe.com/xdp/" timeStamp="2010-07-27T12:57:06Z" uuid="295572a8-3c8b-41b7-8c65-35b915d6289e">
<template xmlns="http://www.xfa.org/schema/xfa-template/2.6/">
   <?formServer defaultPDFRenderFormat acrobat8.1static?>
   <subform name="form1" layout="tb" locale="en_US">
      <pageSet>
         <pageArea name="Page1" id="Page1">
            <contentArea x="0.25in" y="0.25in" w="756pt" h="576pt"/>
            <medium stock="default" short="612pt" long="792pt" orientation="landscape"/>
            <?templateDesigner expand 1?></pageArea>
         <?templateDesigner expand 1?></pageSet>
      <subform w="756pt" h="576pt">
         <field name="DropDownList1" y="12.7mm" x="9.525mm" w="62mm" h="9mm">
            <ui>
               <choiceList>
                  <border>
                     <?templateDesigner StyleID aped3?>
                     <edge stroke="lowered"/>
                  </border>
                  <margin/>
               </choiceList>
            </ui>
            <font typeface="Myriad Pro"/>
            <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>
            <para vAlign="middle"/>
            <caption reserve="25mm">
               <para vAlign="middle"/>
               <value>
                  <text>Drop-down List</text>
               </value>
               <font typeface="Myriad Pro"/>
            </caption>
            <items>
               <text>first</text>
               <text>second</text>
               <text>third</text>
            </items>
            <items save="1" presence="hidden">
               <text>first</text>
               <text>second</text>
               <text>third</text>
            </items>
            <event activity="change" name="event__change">
               <script contentType="application/x-javascript">if (xfa.event.newText == "first" || xfa.event.newText == "second"){
    textSubform.presence = "visible";
    TextField1.validate.nullTest = "error";
} else {
    textSubform.presence = "hidden";
    TextField1.validate.nullTest = "disabled";
}
</script>
            </event>
            <validate nullTest="error"/>
         </field>
         <subform x="12.7mm" y="47.625mm" w="62mm" minH="9mm" name="textSubform" presence="hidden">
            <keep intact="none"/>
            <field name="TextField1" w="62mm" h="9mm">
               <ui>
                  <textEdit>
                     <border>
                        <?templateDesigner StyleID aped3?>
                        <edge stroke="lowered"/>
                     </border>
                     <margin/>
                  </textEdit>
               </ui>
               <font typeface="Myriad Pro"/>
               <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>
               <para vAlign="middle"/>
               <caption reserve="25mm">
                  <para vAlign="middle"/>
                  <value>
                     <text>Text Field</text>
                  </value>
                  <font typeface="Myriad Pro"/>
               </caption>
            </field>
            <?templateDesigner expand 1?></subform>
         <field name="TextField2" y="73.025mm" x="15.875mm" w="62mm" h="9mm">
            <ui>
               <textEdit>
                  <border>
                     <?templateDesigner StyleID aped3?>
                     <edge stroke="lowered"/>
                  </border>
                  <margin/>
               </textEdit>
            </ui>
            <font typeface="Myriad Pro"/>
            <margin topInset="1mm" bottomInset="1mm" leftInset="1mm" rightInset="1mm"/>
            <para vAlign="middle"/>
            <caption reserve="25mm">
               <para vAlign="middle"/>
               <value>
                  <text>Text Field</text>
               </value>
            </caption>
            <validate nullTest="error"/>
         </field>
         <?templateDesigner expand 1?>
         <field name="EmailSubmitButton1" y="12.7mm" x="146.05mm" w="34.925mm" h="6mm">
            <?templateDesigner isEmailSubmitObject true?>
            <ui>
               <button highlight="inverted"/>
            </ui>
            <font typeface="Myriad Pro"/>
            <caption>
               <value>
                  <text>Submit by Email</text>
               </value>
               <para hAlign="center" vAlign="middle"/>
            </caption>
            <border hand="right">
               <?templateDesigner StyleID apbx2?>
               <edge stroke="raised"/>
               <fill>
                  <color value="212,208,200"/>
               </fill>
            </border>
            <bind match="none"/>
            <event name="event__click" activity="click">
               <submit format="xml" textEncoding="UTF-8" target="mailto:"/>
            </event>
         </field>
      </subform>
      <proto/>
      <desc>
         <text name="version">8.2.1.4029.1.523496.503679</text>
      </desc>
      <?templateDesigner expand 1?></subform>
   <?templateDesigner DefaultLanguage FormCalc?>
   <?templateDesigner DefaultRunAt client?>
   <?templateDesigner Grid show:1, snap:1, units:0, color:ff8080, origin:(0,0), interval:(125000,125000)?>
   <?acrobat JavaScript strictScoping?>
   <?templateDesigner FormTargetVersion 26?>
   <?templateDesigner Zoom 71?>
   <?templateDesigner Rulers horizontal:1, vertical:1, guidelines:1, crosshairs:0?>
   <?templateDesigner SaveTaggedPDF 1?>
   <?templateDesigner SavePDFWithEmbeddedFonts 1?></template>
<config xmlns="http://www.xfa.org/schema/xci/2.6/">
   <agent name="designer">
      <destination>pdf</destination>
      <pdf>
         <!--  [0..n]  -->
         <fontInfo/>
      </pdf>
   </agent>
   <present>
      <!--  [0..n]  -->
      <pdf>
         <!--  [0..n]  -->
         <version>1.7</version>
         <adobeExtensionLevel>1</adobeExtensionLevel>
      </pdf>
      <common/>
      <script>
         <runScripts>server</runScripts>
      </script>
      <xdp>
         <packets>*</packets>
      </xdp>
   </present>
   <?originalXFAVersion http://www.xfa.org/schema/xci/2.8/?></config>;
<localeSet xmlns="http://www.xfa.org/schema/xfa-locale-set/2.6/">
   <locale name="en_US" desc="English (United States)">
      <calendarSymbols name="gregorian">
         <monthNames>
            <month>January</month>
            <month>February</month>
            <month>March</month>
            <month>April</month>
            <month>May</month>
            <month>June</month>
            <month>July</month>
            <month>August</month>
            <month>September</month>
            <month>October</month>
            <month>November</month>
            <month>December</month>
         </monthNames>
         <monthNames abbr="1">
            <month>Jan</month>
            <month>Feb</month>
            <month>Mar</month>
            <month>Apr</month>
            <month>May</month>
            <month>Jun</month>
            <month>Jul</month>
            <month>Aug</month>
            <month>Sep</month>
            <month>Oct</month>
            <month>Nov</month>
            <month>Dec</month>
         </monthNames>
         <dayNames>
            <day>Sunday</day>
            <day>Monday</day>
            <day>Tuesday</day>
            <day>Wednesday</day>
            <day>Thursday</day>
            <day>Friday</day>
            <day>Saturday</day>
         </dayNames>
         <dayNames abbr="1">
            <day>Sun</day>
            <day>Mon</day>
            <day>Tue</day>
            <day>Wed</day>
            <day>Thu</day>
            <day>Fri</day>
            <day>Sat</day>
         </dayNames>
         <meridiemNames>
            <meridiem>AM</meridiem>
            <meridiem>PM</meridiem>
         </meridiemNames>
         <eraNames>
            <era>BC</era>
            <era>AD</era>
         </eraNames>
      </calendarSymbols>
      <datePatterns>
         <datePattern name="full">EEEE, MMMM D, YYYY</datePattern>
         <datePattern name="long">MMMM D, YYYY</datePattern>
         <datePattern name="med">MMM D, YYYY</datePattern>
         <datePattern name="short">M/D/YY</datePattern>
      </datePatterns>
      <timePatterns>
         <timePattern name="full">h:MM:SS A Z</timePattern>
         <timePattern name="long">h:MM:SS A Z</timePattern>
         <timePattern name="med">h:MM:SS A</timePattern>
         <timePattern name="short">h:MM A</timePattern>
      </timePatterns>
      <dateTimeSymbols>GyMdkHmsSEDFwWahKzZ</dateTimeSymbols>
      <numberPatterns>
         <numberPattern name="numeric">z,zz9.zzz</numberPattern>
         <numberPattern name="currency">$z,zz9.99|($z,zz9.99)</numberPattern>
         <numberPattern name="percent">z,zz9%</numberPattern>
      </numberPatterns>
      <numberSymbols>
         <numberSymbol name="decimal">.</numberSymbol>
         <numberSymbol name="grouping">,</numberSymbol>
         <numberSymbol name="percent">%</numberSymbol>
         <numberSymbol name="minus">-</numberSymbol>
         <numberSymbol name="zero">0</numberSymbol>
      </numberSymbols>
      <currencySymbols>
         <currencySymbol name="symbol">$</currencySymbol>
         <currencySymbol name="isoname">USD</currencySymbol>
         <currencySymbol name="decimal">.</currencySymbol>
      </currencySymbols>
      <typefaces>
         <typeface name="Myriad Pro"/>
         <typeface name="Minion Pro"/>
         <typeface name="Courier Std"/>
         <typeface name="Adobe Pi Std"/>
         <typeface name="Adobe Hebrew"/>
         <typeface name="Adobe Arabic"/>
         <typeface name="Adobe Thai"/>
         <typeface name="Kozuka Gothic Pro-VI M"/>
         <typeface name="Kozuka Mincho Pro-VI R"/>
         <typeface name="Adobe Ming Std L"/>
         <typeface name="Adobe Song Std L"/>
         <typeface name="Adobe Myungjo Std M"/>
      </typefaces>
   </locale>
</localeSet>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 4.2.1-c041 52.337767, 2008/04/13-15:41:00        ">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description xmlns:xmp="http://ns.adobe.com/xap/1.0/" rdf:about="">
         <xmp:MetadataDate>2010-07-27T12:57:06Z</xmp:MetadataDate>
         <xmp:CreatorTool>Adobe LiveCycle Designer ES 8.2</xmp:CreatorTool>
         <xmp:ModifyDate>2010-07-27T08:51:47-04:00</xmp:ModifyDate>
         <xmp:CreateDate>2010-07-26T14:20:18-04:00</xmp:CreateDate>
      </rdf:Description>
      <rdf:Description xmlns:pdf="http://ns.adobe.com/pdf/1.3/" rdf:about="">
         <pdf:Producer>Adobe LiveCycle Designer ES 8.2</pdf:Producer>
      </rdf:Description>
      <rdf:Description xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" rdf:about="">
         <xmpMM:DocumentID>uuid:295572a8-3c8b-41b7-8c65-35b915d6289e</xmpMM:DocumentID>
         <xmpMM:InstanceID>uuid:eabd697b-14e0-49c0-861e-01382b9269c0</xmpMM:InstanceID>
      </rdf:Description>
      <rdf:Description xmlns:dc="http://purl.org/dc/elements/1.1/" rdf:about="">
         <dc:format>application/pdf</dc:format>
      </rdf:Description>
      <rdf:Description xmlns:desc="http://ns.adobe.com/xfa/promoted-desc/" rdf:about="">
         <desc:version rdf:parseType="Resource">
            <rdf:value>8.2.1.4029.1.523496.503679</rdf:value>
            <desc:ref>/template/subform[1]</desc:ref>
         </desc:version>
      </rdf:Description>
   </rdf:RDF>
</x:xmpmeta>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve">
   <annots/>
</xfdf></xdp:xdp>

Avatar

Level 4

This might help. In the javascript console in Acrobat Pro, I get this:

TextField1 is not defined
3:XFA:form1[0]:#subform[0]:DropDownList1[0]:change

How could that be happening? I'm going to google that and see if I can find a solution.

Avatar

Level 4

I got it. The reason I was getting that "is not defined" error is that the TextField1needed to look like this

form1.#subform[0].DropDownList1::change - (JavaScript, client)
if (xfa.event.newText == "first" || xfa.event.newText == "second"){
    textSubform.presence = "visible";
    textSubform.TextField1.validate.nullTest = "error";
} else {
    textSubform.presence = "hidden";
    textSubform.TextField1.validate.nullTest = "disabled";
}

so that it was located in the subform.