Age restriction

Details

Category: Blog

Published: Thursday, 25 July 2019 13:33

Written by Mihaela

Here it is explained how to allow only people of legal age to submit the form.

In this example, it is assumed that "%d/%m/%Y" date format is used.

To make it able only for people of legal age to submit a form follow these steps:

1) Create a "Calendar" element with format "%d/%m/%Y".

2) Go to Properties of that calendar element, scroll down and in the "Validation" section check the "Required" checkbox, set Type to "Custom".

In the code area that appears below paste the following code:

function ff_CalendarElementName_validation(element, message)
{
   // Checking if the entered date is in right format
   var pattern = /[0-3][0-9]\/(0|1)[0-9]\/(19|20)[0-9]{2}/;
   if(pattern.test(element.value))
   {
      var date_array = element.value.split('/');
      var day = date_array[0];

      // Attention! Javascript consider months in the range 0 - 11
      var month = date_array[1] - 1;
      var year = date_array[2];

      // This instruction will create a date object
      birthDate = new Date(year,month,day);

      if(year != birthDate.getFullYear())
      {
         return message == '' ? "Date isn't entered in the right format.\n" : message;
      }

      if(month != birthDate.getMonth())
      {
         return message == '' ? "Date isn't entered in the right format.\n" : message;
      }

      if(day != birthDate.getDate())
      {
         return message == '' ? "Date isn't entered in the right format.\n" : message;
      }
   }
   else
   {
      return message == '' ? "Date isn't entered in the right format.\n" : message;
   }
   
   var now = new Date();
     
   var dobYear = birthDate.getFullYear();
   var dobMonth = birthDate.getMonth();
   var dobDay = birthDate.getDate()

   var age = now.getFullYear() - dobYear;
   var ageMonth = now.getMonth() - dobMonth;
   var ageDay = now.getDate() - dobDay;

   if (ageMonth < 0 || (ageMonth == 0 && ageDay < 0)){
       age = parseInt(age) - 1;
   }

   if (age < 18) {
       if (message=='') message = "Only persons of legal age can submit this form.\n"
       ff_validationFocus(element.name);
       return message;
   } // if
   else if (age  >= 18){ 
       return '';
   }
    
} // ff_CalendarElementName_validation

NOTE: In the code above you have to replace "CalendarElementName" with the name of that calendar element in your form.

This way, an error message will appear after clicking on the submit button if the age of the person isn't above 18.

Therefore, only users of legal age will be able to submit the form.

LIMIT MAXIMAL NUMBER OF FILES TO UPLOAD

Details

Category: Blog

Published: Wednesday, 17 July 2019 14:08

Written by Mihaela

Here it is explained how to limit the number of files to upload when Allow multi HTML5/Flash uploads checkbox is checked.

Please follow these instructions.

Go to Properties of the "File upload" element in your form and in the Validation section check Required checkbox. Then select Custom as the validation type and in the code area paste in the following:

function ff_uploadelementname_validation(element, message)

{

var children = jQuery('.bfFlashFileQueueClass').children();

var len = Number(children.length);

console.log(len);

if ( len > 3) {

if (message=='') message = " Too many files uploaded.\n"

ff_validationFocus(element.name);

return message;

} // if

return '';

}

NOTE: In the code above replace uploadelementname with the Name of your File upload element.
This is the example where 3 is the maximum number of files to upload. 

In the following line of code, replace 3 with the maximum number wanted.

That will limit the number of files that can be uploaded.

If a user tries to submit the form with too many files uploaded an error message will be shown and won't be able to submit the form until he reduces the number of uploaded files to less or equal to the maximal.

Top 5 Joomla!® 2019 Forms Extensions

Details

Category: Blog

Published: Friday, 19 July 2019 10:10

Written by Mario Puco

CHANGE FIRST DAY OF WEEK IN CALENDAR ELEMENT

Details

Category: Blog

Published: Friday, 12 July 2019 13:09

Written by Mihaela

 CHANGE FIRST DAY OF WEEK IN CALENDAR ELEMENT

Here it is explained how to make Monday the first day of week in Calendar element with date format "%Y-%m-%d". 

Go to form Advance Options > More Options > Scripts > Initialization Script > Custom > Press "Create Code framework" and paste this in between :

Calendar.setup({
        inputField     :    "ff_elem1717", 
        ifFormat       :    "%Y-%m-%d",
        button         :    "ff_elem1717_calendarButton",
        align          :    "Bl",
        singleClick    :    true,
        firstDay: 1
    });

The whole code will look like this:

function ff_formName_init()
{
Calendar.setup({
        inputField     :    "ff_elem1717", 
        ifFormat       :    "%Y-%m-%d",
        button         :    "ff_elem1717_calendarButton",
        align          :    "Bl",
        singleClick    :    true,
        firstDay: 1
    });
} // ff_formName_init

 

NOTE: To make this work for your form you have to find your calendar element ID and replace ff_elem1717 with it. Also, you have to replace ff_elem1717_calendarButton with your calendarButton ID. Also, formName will be the name of your form.

The first day of week can be set to what is suitable by changing firstDay: 1 to another value.