Missing Required Fields Pop-Up

[christopher.young]

I would like to have a pop-up added to a button that alerts the Users of the required fields that are missing before they can move to the next tab. I know that I can add something like this:

fd.onsubmit(function(){
if((fd.field('AHLTA_x002f_CHCS').control()._el().find( "input:checked" ).next().text() == 'AHLTA/CHCS') && (fd.field('Social_x0020_Security_x0020_Numb').value() == "")){
alert('Please fill in the Social Security Number.');
return false;

}

return true;



But I would prefer to not have to add each field individually, below is an example I used in a PDF form to create a loop that looks for required fields I would prefer to do somehting like this:

var requiredFound = false;
var fieldsFound = "";
for (var fieldNumber = 0; fieldNumber < numFields; fieldNumber ++)
{
if(getField(getNthFieldName(fieldNumber)).type != "button" && getField(getNthFieldName(fieldNumber)).required == true && getField(getNthFieldName(fieldNumber)).value == ""){
requiredFound = true;
fieldsFound += "\n" + getNthFieldName(fieldNumber);
}
}
if (submitAllowed == "yes"){
if (requiredFound == true){
app.alert({ cMsg: "Please fill in all required fields (marked wih red):" + fieldsFound, cTitle: "Required fields are empty" });
}
else{

var currentTab = fd.tabControl(0).tabs('option', 'active');
fd.tabControl(0).tabs('option', 'active', currentTab + 1);

}

[YuriyMedvedev]

Hi! You can use this code by adding it in "JavaScript":

Code: Select all

var requiredFields = $('.fd_field')
  .map(function(i, item){return $(item).attr('fd_name')})
  .filter(function(i, item){
   return fd.field(item).titleRequired()
  });

fd.onsubmit(function(){
  var emptyRequieredFields = requiredFields.filter(function(i, item){
   return !fd.field(item).value()});
  if (emptyRequieredFields.length){
   string = '';
   $.each(emptyRequieredFields,function(i,item,array){
    $('.fd_field[fd_name='+item+'] input').css(
     {'border-color': 'rgba(245,25,10,0.6)', 
     'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
     .change(function(){
      self = $(this);
      if (self.text){
      self.css(
       {'border-color': '', 
       'box-shadow': ''})
      }
     });
    string += item + '\n'});
    
   alert('Please fill in all required fields (marked wih red):\n' + string);
   return false;
  }
 return true;
})

[christopher.young]

Can I use this script on a button? I would really like for the script to check for missing required fields on the tab and if all fields are completed then it will move to the next tab.

[YuriyMedvedev]

Hi! This code checks required fields on the 1st tab and if they are filled, switches to the 2nd tab. Just add to "JavaScript" this code:

Code: Select all

 checkTab = 1, //number of checking tab
destTab = 2; //number of tab to move after validation

requiredFields = $('#fd_tabcontrol-0-tab-'+checkTab+' .fd_field')
        .map(function(i, item){return $(item).attr('fd_name')})
        .filter(function(i, item){
            return fd.field(item).titleRequired()
        });

And put in onClick of custom button this part:

Code: Select all

var validate = function(){
        emptyRequieredFields = requiredFields.filter(function(i, item){
            return !fd.field(item).value()});
        if (emptyRequieredFields.length){
            string = '';
            $.each(emptyRequieredFields,function(i,item,array){
                $('.fd_field[fd_name='+item+'] input').css(
                    {'border-color': 'rgba(245,25,10,0.6)', 
                    'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
                    .change(function(){
                        self = $(this);
                        if (self.text){
                        self.css(
                            {'border-color': '', 
                            'box-shadow': ''})
                        }
                    });
                string += item + '\n'});
                
            alert('Please fill in all required fields (marked wih red):\n' + string);
            return false;
        }
    return true;
};
if(validate()) $('#ui-id-'+destTab).click(); 

[christopher.young]

The scripts work great, but I have one last question. Can it display the Title Value as opposed to the InternalName of the Field (i.e. User's Organization instead of User_x0027_s_x0020_Organization)

[YuriyMedvedev]

Hi! Just replace the line in the code above:

Code: Select all

string += item + '\n'});

with the below:

Code: Select all

string += fd.field(item).titleText() + '\n'});

[christopher.young]

Perfect, thank you

[cmagnan]

Hi,
This is working for text field but not for Multiple lines of text.
Can you help me
Thanks

[Nikita Kurguzov]

Dear cmagnan,
This code is quite old, can you tell us more specifically about your form and requirements? We can try and write a solution for you that would work with Multiple lines of text.

[cmagnan]

Hi,
I would like to validate if the multiple-line fields are empty or not when the user clicks the Save button. If the fields are empty, a red border must be added to the field. In addition, a generic message must be displayed saying to fill in the fields with a red border must be completed (without mentioning the field to be completed in the alert message).
I have also single line of text to validate in the same way.
Thanks
Catherine