Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Form with validation button

Avatar

Level 2

Hi,

I have been reading forums online for the past two days to try to find a solution to this problems.

I have 1 form with 4 subforms.  Only the 'chosen' subform needs to be completed based on a drop down selection.  I have that part working great.  What I am having trouble with is adding a button to each subform to verify a list of up to 26 fields that are required.  If not all 26 fields have been completed, a message comes up asking the user to complete the fields.  If they are all completed, then an email box comes up and attaches the completed form (not just the subform) to the email.

I realize there are a lot of threads on this and I have tried several of them but cannot seem to get this working.

I have the following code in the Click event of the button and in JavaScrip language:

var RequiredFields = new Array(26);

    RequiredFields[0]= "form1.EDER.EDER.CRFOR";

    RequiredFields[1]="form1.EDER.EDER.VisitDate";

    RequiredFields[2] ="form1.EDER.EDER.VisitTime";

    RequiredFields[3] = "form1.EDER.EDER.MHNumb";

    RequiredFields[4] ="form1.EDER.EDER.PHIN";

    RequiredFields[5]= "form1.EDER.EDER.LastName";

    RequiredFields[6] ="form1.EDER.EDER.FirstName";

    RequiredFields[7] ="form1.EDER.EDER.Marital";

    RequiredFields[8] ="form1.EDER.EDER.DOB";

    RequiredFields[9] ="form1.EDER.EDER.ModeArrival";

    RequiredFields[10] ="form1.EDER.EDER.Address";

    RequiredFields[11] ="form1.EDER.EDER.CityTown";

    RequiredFields[12] ="form1.EDER.EDER.Prov";

    RequiredFields[13] ="form1.EDER.EDER.PostalCode";

    RequiredFields[14]= "form1.EDER.EDER.PrimPhone";

    RequiredFields[15] ="form1.EDER.EDER.CellPhone";

    RequiredFields[16] ="form1.EDER.EDER.PrimCareProv";

    RequiredFields[17] ="form1.EDER.EDER.HomeLang";

    RequiredFields[18] ="form1.EDER.EDER.OffLang";

    RequiredFields[19] ="form1.EDER.EDER.Interpreter";

    RequiredFields[20] ="form1.EDER.EDER.Addressograph";

    RequiredFields[21] ="form1.EDER.EDER.CTASlvl";

    RequiredFields[22] ="form1.EDER.EDER.VisitRsn";

    RequiredFields[23] ="form1.EDER.EDER.ERProv";

    RequiredFields[24] ="form1.EDER.EDER.ARO";

    RequiredFields[25] ="form1.EDER.EDER.NOK";

var AlertMsg = new Array(26);

    AlertMsg[0] = "Please select the type of central registration.";

    AlertMsg[1] = "Please indicate the Visit Date.";

    AlertMsg[2] = "Please indicate the Visit Time.";

    AlertMsg[3] = "Please indicate the MH Number.";

    AlertMsg[4] = "Please indicate the PHIN.";

    AlertMsg[5] = "Please indicate the Last Name.";

    AlertMsg[6] = "Please indicate the First Name.";

    AlertMsg[7] = "Please provide the marital status.";

    AlertMsg[8] = "Please indicate the Date of Birth.";

    AlertMsg[9] = "Please select the Mode of Arrival.";

    AlertMsg[10] = "Please provide the address.";

    AlertMsg[11] = "Please provide the City/Town.";

    AlertMsg[12] = "Please provide the Province.";

    AlertMsg[13] = "Please provide the Postal Code.";

    AlertMsg[14] = "Please provide the Primary Phone Number.";

    AlertMsg[15] = "Please provide the Cell Phone.";

    AlertMsg[16] = "Please provide the Primary Care Provider.";

    AlertMsg[17] = "Please provide the Home Language.";

    AlertMsg[18] = "Please provide the Official Language.";

    AlertMsg[19] = "Please indicate Interpreter needs.";

    AlertMsg[20] = "Please indicate Addressograph needs.";

    AlertMsg[21] = "Please indicate CTAS/triage level.";

    AlertMsg[22] = "Please provide Visit reason.";

    AlertMsg[23] = "Please provide Emergency Provider.";

    AlertMsg[24] = "Please indicate ARO";

    AlertMsg[25] = "Please provide Next of Kin.";

 

var if(bSuccess==true);

var emptyTest=/^\s*$/;

var fieldCount=RequiredFields.length;

var fld=0;

for(var i=0;i

My fields are as follows:

1494426_pastedImage_2.png1494427_pastedImage_3.png

When I run the debugger in Adobe Pro, I get piles of syntax errors:

TypeError: f is null

3:Field:Calculate

TypeError: f is null

3:Field:Calculate

TypeError: f is null

3:Field:Calculate

TypeError: f is null

3:Field:Calculate

TypeError: f is null

3:Field:Calculate

SyntaxError: syntax error

3:XFA:form1[0]:EDER[0]:EDER[0]:Button1[0]:click

SyntaxError: syntax error

3:XFA:form1[0]:EDER[0]:EDER[0]:Button1[0]:click

SyntaxError: syntax error (THIS KEEPS ON until Line 58)

followed by this error

SyntaxError: missing variable name

57:XFA:form1[0]:EDER[0]:EDER[0]:Button1[0]:click

SyntaxError: missing variable name

Any help to clean up what is probably right in front of my nose would be great.  I am relatively new at JavaScript.

Much appreciate the help!

1 Accepted Solution

Avatar

Correct answer by
Level 10

Hi,

Have a look at this version, mainly a matter of changing the names in the script to match yours, but I have also moved it to the change event.

https://sites.google.com/site/livecycledesignercookbooks/home/Central%20Registration%20Forms2.pdf?at...

In the initialise event I've added the line "this.execEvent("change");" so the form displays none of the subforms when first opened.  If you don't want that then remove the line.

LiveCycle designer uses your instance of Acrobat (or Reader whichever is your default) so the options in Acrobat have an affect.

Bruce

View solution in original post

21 Replies

Avatar

Level 7

I think your javascripting is quite good. I still use basic javascript, but it gets the job done.

Not sure how much i can help but i have a few thoughts:

The number at the start of the error in the debugger shows the line where the problem is: what is on line 3 and line 57? Sounds like line 57 is referencing a variable that doesnt exist.

I can't help but wondering if resolving the nodes in the array might help with referencing the correct subform. If you are getting a lot of null errors, is the code executing on a subform that is blank?

Avatar

Level 10

This line looks a bit odd;

var if(bSuccess==true);

I would guess that it is on line 57.

It does seem like you have a lot of code here, an alternative would be to turn the mandatory test off for a field

form1.EDER.EDER.CRFOR.validate.nullTest = "disabled"

and then to make it mandatory again

form1.EDER.EDER.CRFOR.validate.nullTest = "error"

Avatar

Level 2

I am on so many websites to try to find code samples that I can tweak and make work here, I'm not even sure where I am anymore.  It does seem to error out on that line - but am not sure how to fix it.

I took off the field validation that is built-in to live cycle as it would look at all the fields in the document (4 pages) and not just the fields in that subform when clicking on the submit button.

I have tried simpler if, else functions, but those seem to error as well. 

Basically, I'm not sure where to go from here.  Any ideas would be appreciated!

Avatar

Level 2

I was able to fix line 3... but line 57 is the

var if(bSuccess==true);

and I don't know what to replace it with.

Avatar

Level 10

Hi,

I couldn't understand that line without seeing the rest of the code, what does bSuccess get used for later on?

But, to expand on my alternative approach, if you have a function like,

function setMandatory(node, isMandatory)

{

    switch (node.className)

    {

        case "subform":

        case "subformSet":

        case "area":

            for (var i = 0; i < node.nodes.length; i++)

            {

                var childNode = node.nodes.item(i);

                setMandatory(childNode, isMandatory);

            }

            break;

        case "field":

        case "exclGroup":

            node.validate.nullTest = (isMandatory) ? "error" : "disabled";

            break;

    }

}

Then you can call it passing in a subform and a true value to make all fields in that subform mandatory or false to make them optional.

Then in the change event of your dropdown you can call it with some code like

var option1Mandatory, option2Mandatory, option3Mandatory, option4Mandatory;

switch (xfa.event.change)

{

    case "Option 1":

        option1Mandatory = true;

        break;

    case "Option 2":

        option2Mandatory = true;

        break;

    case "Option 3":

        option3Mandatory = true;

        break;

    case "Option 4":

        option4Mandatory = true;

        break;

}

validationUtils.setMandatory(Option1, option1Mandatory);

validationUtils.setMandatory(Option2, option2Mandatory);

validationUtils.setMandatory(Option3, option3Mandatory);

validationUtils.setMandatory(Option4, option4Mandatory);

Option1.presence = option1Mandatory ? "visible" : "hidden";

Option2.presence = option2Mandatory ? "visible" : "hidden";

Option3.presence = option3Mandatory ? "visible" : "hidden";

Option4.presence = option4Mandatory ? "visible" : "hidden";

Here's an example https://sites.google.com/site/livecycledesignercookbooks/home/setMandatory.pdf?attredirects=0&d=1

This should end up with less code and will still work if you add or remove some fields.

Avatar

Level 2

Sorry for the very late reply on your response!  I believe what you are suggesting will work.

I have placed each 'set' or mandatory fields in a subform for each of the 4 forms.

I haven't worked in this in so long and I was never very good at this to start off with ( ) that I am going to ask a dumb question...

In the example you provided, you have Variables showin gin the hierarchy tab...  I tried using the File-Form Properties-Variables , but it doesn't let me add any code if I add it this way.

How do I get the Variables to come up so that I can add the code from the first half of your answer.

Your example is exactly what I am looking for.

Avatar

Level 10

Hi,

The script objects look the same but are inserted by right-clicking on the form object (the top one) and selecting "Insert Script Object".

Here's more info https://helpx.adobe.com/pdf/aem-forms/6-3/scripting-basics.pdf#nameddest=G10.1663807 

Bruce

Avatar

Level 2

Thanks for this Bruce - and your patience! 

I am starting to think this is just too big a project for me!

I added your code, changed the field names to match my document settings, but it isn't working for me at all - I appreciate all the help you are providing, but understand if this is too big an ask as well!

On the first form - EDERPG, I put all the mandatory fields into a subgroup - ReqEdER, on all the other forms DirectPG, DISCHPG, CareAdvPG, I have not done this grouping.  There are mandatory fields on each of these.

The Options in the drop down on the first page are as follows

Feild - Text:

ED/ER or Direct Registration to Observation (1)

Direct Admission (2)

Discharge (3)

Care Advancement/Patient Movement (4)

I do have binding values associated with each of those (as indicated in the parenthesese)

Here are screenshots of the current hierarchy.

1529455_pastedImage_0.png

1529921_pastedImage_1.png

1529922_pastedImage_2.png

1529923_pastedImage_3.png

1529924_pastedImage_4.png

Here is your code that I modified so far:

In my Page with the drop downs that select which form would be mandatory...

1529925_pastedImage_9.png

On the Variables Script:

1529926_pastedImage_10.png

Like I said previously, I really appreciate you taking the time to look at this, and understand I am asking a lot.

Thanks in advance!

Avatar

Level 10

Hi,

It maybe easier if you could share your form, can you upload it to Google Docs, Dropbox or whatever and post a link to it here?

One thing to try though would be to change the first argument to the setMandatory method.  This should be the node name, so EDER, Direct, DISCH or CareAdv.

You should also make sure you have that in Acrobat under Edit ... Preferences ... JavaScript ... Show console on errors and messages is set, as you wont see any script errors otherwise.

Avatar

Level 2

Hi Bruce,

I have uploaded the file to: Central Registration Forms2.pdf - Google Drive

I am using LiveCycle to build this form versus Adobe Reader.

Thanks

J

Avatar

Correct answer by
Level 10

Hi,

Have a look at this version, mainly a matter of changing the names in the script to match yours, but I have also moved it to the change event.

https://sites.google.com/site/livecycledesignercookbooks/home/Central%20Registration%20Forms2.pdf?at...

In the initialise event I've added the line "this.execEvent("change");" so the form displays none of the subforms when first opened.  If you don't want that then remove the line.

LiveCycle designer uses your instance of Acrobat (or Reader whichever is your default) so the options in Acrobat have an affect.

Bruce

Avatar

Level 2

Hi Bruce,

I like what you've done with none of the forms coming up before they select the type of form they are filling in.

Where is the code for which fields are marked as 'required'.  I just want to mark the fields that are actually required as currently, it looks like all the fields on each of the forms are required.

Sorry- Just back from holidays and wanting to tweak what you sent me back as I think we are right there! 

Avatar

Level 10

Hi,

Try replacing the code in the validationUtils with the following.

function findTemplateField(vField) {

      var vSOM = vField.somExpression.replace(/\[[0-9]*\]\./g, ".");

      vSOM = vSOM.replace(/xfa\.form/, "$template");

      return xfa.resolveNode(vSOM);

function setMandatory(node, isMandatory) {

      switch (node.className)     {

          case "subform":        

          case "subformSet":

          case "area":

              for (var i = 0; i < node.nodes.length; i++)              {

                  var childNode = node.nodes.item(i);

                  setMandatory(childNode, isMandatory);

                }

              break;

            case "field":

         case "exclGroup":

              if (findTemplateField(node).validate.nullTest == "error") {

                  node.validate.nullTest = (isMandatory) ? "error" : "disabled";

             }

             break;

      }

}

The line "if (findTemplateField(node).validate.nullTest == "error") {" checks to see if the field is set as required.

Bruce

Avatar

Level 2

Hi Bruce - This new code is exactly what I was needing.  The form works exactly as it should.  I'm having trouble reader enabling the form as it seems to lose it's functionality when I do that (the first drop down that brings up the other pages is no longer a drop down)... but I have had this issue on my computer before and have found a way around it in the past.  I will try these techniques again and see if I can get around it again.

You have no idea how grateful I am!!

Avatar

Level 2

The powers that be have just indicated that they want a 5th form attached to this process.  Where is the code for the drop down so I can add this new page to the document?

Avatar

Level 10

You will have to add the value to the drop down in the Field tab of the Object palette for the drop down.  Then there's some code in the change event of the drop down that will need to be extended.  ... as well as adding the actual 5th form

Avatar

Level 2

I have added the value in the drop down.... but when I look in the change event - I don't see where the code you added is.  All I see is my initial code that woudl hide and unhide the pages based on the drop down - but these were all made into  comments.

Sorry for being so dense here.

Avatar

Level 10

Hi,

The change event is were it should be, but somehow there are two change events for the drop down and the first one is empty which is what you see.  To fix this you need to go into the XML Source (make a copy of your form first), so under View ... XML Source you will see the internal mark-up of the form, scroll down until you see the following three lines and delete them.

            <event activity="change" name="event__change">

               <script contentType="application/x-javascript"/>

            </event>

Change back to design view (you will probably get some warning pop-ups, but just ok them).  You should now see the code.

Bruce

Avatar

Level 2

Hi Bruce,

That fixed it - I could now see the change event in the scripting window.  I was able to successfully add the new form as an option and it all seems to be working right now.  We have folks coming in next week to thoroughly test the form, so that will be the ultimate test - but otherwise I just need to let you know that I couldn't be at the testing phase without all the time you spent answering me and even coding it for me in the end.  You went above and beyond for a complete stranger and I truly appreciate this.  I will be going on maternity leave in the next few weeks and plan on purchasing a javascripting book during this time to come back with more knowledge on this matter.  Once again - a huge thanks to you!

Avatar

Level 10

Hi,  Thank you for the response, I'm glad I could help and I hope every thing goes well.  I was going to recommend a JavaScript book but now realize that there's been so many since I last brought one I'm not sure about the new ones.  I would just say don't feel you have to buy the latest one as Acrobat/Reader is still on JavaScript ES5 when the browsers would now support ES6.  Bruce