Validating Fields in Javascript while preventing an email to be sent until all required fields are completed.

[andrewn732010]

Hi,

I have a form with a set of required fields that upon clicking submit an email is generated with the certain fields populating the email body. I want it so that the email won't be generated until all the required fields have been filled in.

The script I put together identifies the required fields, shows a notification to the user that they aren't completed, and highlights them in red when you click submit, but it also generates the email after the pop-up appears that fields need to be completed. Is there a way to prevent that from happening until all the required fields are filled in? I have been going through these forums and have been taking snippets of code from a variety of places so I have totally missed something, but any help is greatly appreciated.

Here is my code currently.

\\Validation of the fields

var emptyFields = new Array(); // array to hold incomplete field names;

var oField; // variable to hold field object being testee;

var bProcess =  true; // assume all fields completed;

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

      oField = this.getField(this.getNthFieldName(i));

     if (oField.type!="button" && oField.required ) {

     // check based on field type

  switch(oField.type) {

  case "button":

  // do nothing;

  break;

  case "checkbox":

  case "radiobutton":

   if(oField.value == oField.defaultValue && oField.value == "Off") {

   emptyFields.push(f.name);

   bProcess = false;

   }

  break;

  case "combobox":

  case "listbox":

  case "text": 

   if(oField.value == oField.defaultValue) {

   emptyFields.push(oField.name);

    bProcess = false;

    }

  break; 

  case "signature":

  if(oField.value == oField.defaultValue) {

   emptyFields.push(f.name);

   bProcess = false;

  }

  break;

  default:

  app.alert("Field not processed " + oField.name + " type " + oField.type, 1, 0);

   bProcess = false;

  break;

  } // end switch type;

  } // end if required;

} // end loop of fields;

if (bProcess == true) {

     // do something;

  app.alert("all fields completed", 3, 0);

} else {

app.alert("Error! You must fill in the following fields:\n" + emptyFields.join("\n"), 1, 0);

}

// Setting up the email to send

var cToAddr = "lihelp@phila.gov"

// CC Email Address

var cCCAddr = "pfd.fcu@phila.gov"

// Set the subject and body text for the email message

var cSubLine = "Dangerous Property Referral -" + " " + this.getField("Address").value;

var cBody = "Please review the information about the following property:" + '\r\n' + '\r\n'+

"Address:" + " " + this.getField("Address").value + '\r\n' +

"Occupancy Type:" + " " + this.getField("Occupancy Type").value + '\r\n' +

"Building Type:" + " " + this.getField("Building Type").value + '\r\n' +

"Construction Type:" + " " + this.getField("Construction Type").value + '\r\n' +

"Heavy Contents:" + " " + this.getField("Heavy Contents").value + '\r\n' +

"HazMats:" + " " + this.getField("HazMats - yes/no").value + '\r\n' +

"Prior Fire:" + " " + this.getField("Prior fire - yes/no").value  + '\r\n' +

"Known Hazards:" + " " + this.getField("Known hazards - Details").value + '\r\n' +

"Structural Concerns:" + " " + this.getField("Structural Concerns - Details").value;

// Send the entire PDF as a file attachment on an email

this.mailDoc({bUI: true, cTo: cToAddr, cCc: cCCAddr, cSubject: cSubLine, cMsg: cBody});

[try67]

Move the part of the code that emails the file next to where it says "// do something;"...

[andrewn732010]

Thank you!

Two more questions.

Your fix appears to work, with the exception of 1 dropdown field. It's a dropdown field that has a blank as the default and then a Yes or a No option for the question if there is a Basement or Cellar. I have selected No and it still gives me the pop-up that it's not filled in.

Also how would I go about highlighting the fields that were required that were not filled in so the user knows what they need to complete?

Thank you so much for your help!

[andrewn732010]

Here is my updated code with your original suggested change, just for reference:

var emptyFields = new Array(); // array to hold incomplete field names;

var oField; // variable to hold field object being testee;

var bProcess =  true; // assume all fields completed;

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

      oField = this.getField(this.getNthFieldName(i));

     if (oField.type!="button" && oField.required ) {

     // check based on field type

  switch(oField.type) {

  case "button":

  // do nothing;

  break;

  case "checkbox":

  case "radiobutton":

   if(oField.value == oField.defaultValue && oField.value == "Off") {

   emptyFields.push(f.name);

   bProcess = false;

   }

  break;

  case "combobox":

  case "listbox":

  case "text": 

   if(oField.value == oField.defaultValue) {

   emptyFields.push(oField.name);

    bProcess = false;

    }

  break; 

  case "signature":

  if(oField.value == oField.defaultValue) {

   emptyFields.push(f.name);

   bProcess = false;

  }

  break;

  default:

  app.alert("Field not processed " + oField.name + " type " + oField.type, 1, 0);

   bProcess = false;

  break;

  } // end switch type;

  } // end if required;

} // end loop of fields;

if (bProcess == true) {

// do something;

// This is the form return email.

var cToAddr = "lihelp@phila.gov"

// First, get the client CC email address

var cCCAddr = "pfd.fcu@phila.gov"

// Set the subject and body text for the email message

var cSubLine = "Dangerous Property Referral -" + " " + this.getField("Address").value;

var cBody = "Please review the information about the following property:" + '\r\n' + '\r\n'+

"Address:" + " " + this.getField("Address").value + '\r\n' +

"Occupancy Type:" + " " + this.getField("Occupancy Type").value + '\r\n' +

"Building Type:" + " " + this.getField("Building Type").value + '\r\n' +

"Construction Type:" + " " + this.getField("Construction Type").value + '\r\n' +

"Heavy Contents:" + " " + this.getField("Heavy Contents").value + '\r\n' +

"HazMats:" + " " + this.getField("HazMats - yes/no").value + '\r\n' +

"Prior Fire:" + " " + this.getField("Prior fire - yes/no").value  + '\r\n' +

"Known Hazards:" + " " + this.getField("Known hazards - Details").value + '\r\n' +

"Structural Concerns:" + " " + this.getField("Structural Concerns - Details").value;

// Send the entire PDF as a file attachment on an email

this.mailDoc({bUI: true, cTo: cToAddr, cCc: cCCAddr, cSubject: cSubLine, cMsg: cBody});

  app.alert("all fields completed", 3, 0);

} else {

app.alert("Error! You must fill in the following fields:\n" + emptyFields.join("\n"), 1, 0);

}

[try67]

The entire part where you check the field's type is not necessary. The only thing you need to do is check if the current value is the same as the default value, regardless of the field type (except for buttons).

If you want to highlight the empty fields you can do it using the emptyFields array at the end, or simply at the moment when you recognize that they are empty. However, keep in mind that you should change the color back to transparent (or whatever it was before) if they are filled in.

[andrewn732010]

Thanks for the response.

I am not entirely sure how I should go about changing the code. I have pretty much just tried to amend all of your contributions that I have seen in these forums so they fit my data. Not sure how to go about simplifying it the validation.

At least it's pretty much working except for that dropdown box I referenced above that isn't registering as having been filled in.

Thanks again.

[try67 · Accepted solution]

Replace all of this:

    // check based on field type

  switch(oField.type) {

  case "button":

  // do nothing;

  break;

  case "checkbox":

  case "radiobutton":

   if(oField.value == oField.defaultValue && oField.value == "Off") {

   emptyFields.push(f.name);

   bProcess = false;

   }

  break;

  case "combobox":

  case "listbox":

  case "text": 

   if(oField.value == oField.defaultValue) {

   emptyFields.push(oField.name);

    bProcess = false;

    }

  break; 

  case "signature":

  if(oField.value == oField.defaultValue) {

   emptyFields.push(f.name);

   bProcess = false;

  }

  break;

  default:

  app.alert("Field not processed " + oField.name + " type " + oField.type, 1, 0);

   bProcess = false;

  break;

  } // end switch type;

With just this:

if (oField.valueAsString == oField.defaultValue) {

   emptyFields.push(oField.name);

    bProcess = false;

}

[andrewn732010]

You are seriously incredible! Thank you!

My final question is, how can I go about highlighting which fields are required. The pop-up is nice, but it would make it easier if they were identified in red. I found this snippet of code that worked prior to some changes I made but I'm not sure if it will still work or where in the script it should go.

f.strokeColor = color.red;   //Highlights the required fields in red

Thank you again for your responses, they have been incredibly helpful.

[try67]

Just add this line inside of the if-condition I posted before:

oField.strokeColor = color.red;

And after it you can add this:

else oField.strokeColor = color.transparent;

[randyd69]

Hi try67, 

I have been trying to follow this thread that you and andrewn732010 were working on.. I am a novice at this.

But is this what the code is supposed to look like?

if (oField.valueAsString == oField.defaultValue) {
   oField.strokeColor = color.red;
   emptyFields.push(oField.name);

    bProcess = false;
else oField.strokeColor = color.transparent;

}

I get an error on line 7, column 1 It probably the line before? 

Thanks,

Randy

[Bernd Alheit]

Put the } before else

[randyd69]

Hi -

I seems to still be missing something. Because when I click on my "Step 2" button, nothing seems to happen other than the screen flickers once.

Here is a screenshot of my javascript code for the "Step 2" button:

I got it setup as a "Mouse Up" action:

 I have been trying to use the example in this thread. I seems to be missing something, but I don't what.What should I be looking for?

[Bernd Alheit]

Post the script.

[randyd69]

I am posting all Javascript in the PDF and I attach the pages of the PDF file to give you an idea of what I am trying to accomplish. I hope I have enough detail in here.

Script to apply "Today's Date". It works.

//<AcroForm>
//<ACRO_source>Today's Date:Calculate</ACRO_source>
//<ACRO_script>
/*********** belongs to: AcroForm:Today's Date:Calculate ***********/
dateToday();
//</ACRO_script>
//</AcroForm>

 Button 2 script

//Validation of the fields;
var emptyFileds - new Array(); //array to hold imcomplete field names;
var oField; // variable to hold field object being tested;
var bProcess = true; // assume all fields completeed;
this.getField("Step 3 - Email will open click the Send email button.").display = display.hidden;
this.getField("Step 4 - Finish").display = display.hidden;
if (oField.valueAsString == oField.defaultValue) {
   oField.strokeColor = color.red;
   emptyFields.push(oField.name);
   bProcess = false;
}
else { oField.strokeColor = color.transparent;
	this.getField("Step 2 - Review your answers then click here to submit form").display = display.visible;
}

Button 3 - No script, just a "Submit a form" and "Show/hide a field action"

 Step 4 - No script - just a "Reset a form", Execute a menu item - View > Page Navigation > First Page", (2) "Show/Hide a field" actions.

 I reset all fields

Then go to First Page of a 4 page PDF file

Now Hide Step 3 button

Hide Step 4 button.

End of processing.

Here is what the form look like:

Page 1:It is just a text page with instructions for the applicant.

Page 2: Beginning of Job Application

Page 3:

Last 4:

This should give you an idea of what I am trying to accomplish.

Thanks in advance for all help. 

[Bernd Alheit]

Check the Javascript console (ctrl-j) for errors.

[randyd69]

I did find one mistake:

var emptyFileds - new Array(); //array to hold imcomplete field names;

Should be a "=", note a "-". I changed that.

var emptyFileds = new Array(); //array to hold imcomplete field names;

 Now I am getting this error message:

TypeError: this.getField(...) is null
5:AcroForm:Step 2 - Review your answers then click here to submit form:Annot1:MouseUp:Action1

[Bernd Alheit]

The error message means that the specified field doesn't exists.