Missing Required Fields Pop-Up

rss

Posted by christopher.young - Oct 16 ’16 at 10:16

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
    Moderator
    Member for: 5 years 9 months 5 days
    #1 by YuriyMedvedev Oct 17 ’16 at 08:21

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

     

    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;
})
    link flag
  • christopher.young
    Member
    Member for: 5 years 8 months 25 days
    #2 by christopher.young Oct 17 ’16 at 12:19

    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.

    link flag
  • YuriyMedvedev
    Moderator
    Member for: 5 years 9 months 5 days
    #3 by YuriyMedvedev Oct 18 ’16 at 07:01

    [#2]: 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:

     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:

     

    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(); 
    link flag
  • christopher.young
    Member
    Member for: 5 years 8 months 25 days
    #4 by christopher.young Oct 18 ’16 at 04:23

    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)

    link flag
  • YuriyMedvedev
    Moderator
    Member for: 5 years 9 months 5 days
    #5 by YuriyMedvedev Oct 19 ’16 at 05:19

    [#4]: Hi! Just replace the line in the code above:

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

     

    with the below:

     string += fd.field(item).titleText() + '\n'});
    link flag
  • christopher.young
    Member
    Member for: 5 years 8 months 25 days
    #6 by christopher.young Oct 19 ’16 at 07:15

    Perfect, thank you

    link flag
Displaying 1 to 6 of 6 messages

Related threads