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;
    })
  • 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.

  • 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(); 
  • 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)

  • 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'});
  • christopher.young
    Member
    Member for: 5 years 8 months 25 days
    #6 by christopher.young Oct 19 ’16 at 07:15

    Perfect, thank you

Displaying 1 to 6 of 6 messages