CHECK IF EMAIL ALREADY ENTERED

BreezingForms

 

Here it is explained how to set Ajax validation for a field in a form so that if a user tries to submit the form with the same value which was already submitted in that form an error message is shown. 

In the following example, an email field NAMED "email" is being validated.

To implement this to your form, follow these steps:

1. Go to Properties of the field that you wish to validate. In the Validation section check the "Required" checkbox and set the Validation type to "Custom". In the code are below that appears, put the following code:

function ff_email_validation(element, message)
{
    if(ff_validemail(element, message) != '') return 'Please enter an email address';
    var myreturn = '';
    JQuery.ajaxSetup({async:false});
    JQuery.post('index.php', { option: 'com_breezingforms', ff_form: ff_processor.form, Itemid: 0, format: 'html', email: element.value }, function(data){ if( data != '1' ){ message == '' ? myreturn = 'Email exists already!' : myreturn = message; } } );
    return myreturn;
}

 NOTE: Replace every instance of email with the name of that field in your form that you wish to validate. Also, you can replace "Email exists already" with whatever message you want.

2. Go to the Advanced properties of the field that you wish to validate. In Actionscript section set Type to Custom and Action to Change. In the code below put the following code:

function ff_email_action(element, action)
{
    switch (action) {
        case 'change':
            JQuery('#bfEmailError').remove();
            if(element.value == '') return;
            var myreturn = '';
            JQuery.ajaxSetup({async:false});
            JQuery.post('index.php', { option: 'com_breezingforms', ff_form: ff_processor.form, Itemid: 0, format: 'html', email: element.value }, function(data){ if( data != '1' ){ myreturn = '<div class="bfError" id="bfEmailError"></div>'; } else { myreturn = ''; } } );
            if(myreturn != '') { JQuery(element).after(myreturn); } else { JQuery('#bfEmailError').remove(); }
            break;
        default:;
    } // switch
} // ff_email_action

 NOTE: Replace every instance of email with the name of that field in your form that you wish to validate.

3. Go to form's Advanced properties > More options > Form pieces and in the Before Form section set Type to Custom and in the code area below put the following code:

if( JRequest::getVar('email', null) !== null ){
   while (@ob_get_level() > 0) {
    @ob_end_clean();
   }
   $db = JFactory::getDBO();
   $db->setQuery("Select s.id From #__facileforms_records As r, #__facileforms_subrecords As s Where s.record = r.id And r.form = ".$this->form." And s.`value` = " . $db->Quote(JRequest::getVar('email', null)));
   if(trim($db->loadResult())){
     echo 0;
   } else {
     echo 1;
   }
   exit;
}

NOTE: Replace every instance of email with the name of that field in your form that you wish to validate.

4. Go to form's Advanced properties > More options > Submit pieces and in the Begin Submit section set Type to Custom and in the code area below put the following code:

$this->execPieceByName('ff_InitLib');
$db = JFactory::getDBO();
$db->setQuery("Select s.id From #__facileforms_records As r, #__facileforms_subrecords As s Where s.record = r.id And r.form = ".$this->form." And s.`value` = " . $db->Quote(ff_getSubmit('email')));
if(trim($db->loadResult())){
 exit;
}

NOTE: Replace email with the name of that field in your form that you wish to validate.

That will do the trick, your form will throw an error message saying "Email exists already" in case you try to submit the form with email address (or another info) that way already submitted.

 

To sum up, this is how to disable user to submit the form with the same value twice in a specific form field. You can apply this for email or username, or another field that you need. Above is explained how to apply this to a field in your form.

 

 

Add a comment

DISABLE CERTAIN DAYS OF WEEK IN RESPONSIVE CALENDAR

BreezingForms

 

Here it is explained how to disable certain day(s) of the week in a Responsive Calendar, in other words, how to make it unclickable. Also, styling is added to the disabled day of the week so that users easier recognize that it can't be clicked on.

 

Go to Advanced options of your form > More options > Form pieces > Before Form, set Type to Custom and paste the following code:

echo '<script type="text/javascript">
		JQuery(document).ready(function () {
					
			JQuery("#ff_elem16229_calendarButton").pickadate({
				format: "yyyy-mm-dd", 
				selectYears: 60, 
				disable: [7],
				selectMonths: true,
				editable: true,
				firstDay: 1,
				onSet: function() {JQuery("#ff_elem16229").val(this.get("value"));}
			});
                    
		});
	</script>
<style>
.picker__day--disabled{
background-color: gray !important;
}
</style>
';

This is an example which will disable Sundays.

NOTE: You have to replace ff_elem5113_calendarButton with the ID of your calendar button. To find it you have to inspect that element. Also, replace ff_elem5113 with the right ID of the calendar field.

The part between <style> tags will make the disabled fields background gray. Here you can adjust CSS as you like.

Which days of the week are disabled is explained by the following:

disable: [6,7]

 

To disable the whole weekend, the following code should be added:

echo '<script type="text/javascript">
		JQuery(document).ready(function () {
					
			JQuery("#ff_elem16229_calendarButton").pickadate({
				format: "yyyy-mm-dd", 
				selectYears: 60, 
				disable: [6,7],
				selectMonths: true,
				editable: true,
				firstDay: 1,
				onSet: function() {JQuery("#ff_elem16229").val(this.get("value"));}
			});
                    
		});
	</script>
<style>
.picker__day--disabled{
background-color: gray !important;
}
</style>
';

 NOTE: Replace the ID as explained above.

 

 That will disable the wanted days which can be very useful, especially if the form is used for some kind of reservations or application.

 

Add a comment

Installation of a Spectrum colorpicker for BreezingForms

Spectrum is a Javascript plugin written by Brian Grinstead.

Download:

Spectrum can be downloaded for free from its GitHub page.

Installation:

Unzip Sepctrum and install it in the site/includes directory where you will have created two subdirectories "js" and "css". 
Place the file spectrum.js in the "js" directory and spectrum.css in the "css" directory.

Use:

  • In your form, where you want to present the colorpicker, create a text element. Give it a name and remember it.
  • Go to form Advance Options > More Options > Piece > Before form piece > Custom > and paste this in between :
    $this->execPieceByName('ff_InitLib'); // initialisation BreezingForms library
    echo '
    	<style>
    		.colorpicker {display: none !important;} // Contrer un affichage indésirable et inattendu du champ
    	</style>
    	<link rel="stylesheet" href="/includes/css/spectrum.css" />
    	<script type="text/javascript" src="/includes/js/spectrum.js"></script>
    ';

     

  • Now in the script tab > Initialization Script > Custom > Press "Create Code framework" and paste this in between :
    ff_getElementByName('fieldName').addClass('colorpicker').id = 'myID';
    	jQuery('#myID').spectrum({
    	   // Enter here the desired parameters, separated by a comma, to customize your colorpicker
    	   // for example:
    	   color: 'f00',
    	   showPalette: true,
    	   cancelText: 'Annuler', // Custom text for any language other than English
    	   chooseText: 'Valider', // Custom text for any language other than English
    	    palette:[ // Below the different pellets of the color palette, everything is customizable.
    			["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
    			["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
    			["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
    			["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
    			["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
    			["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
    			["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
    			["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
    		],
    	});
     

You can find all the options available on the plugin's documentation page with an overview of each one

A more complete tutorial (in French) with examples can be found on this page.

Writen from Eddy Van Hoeke (www.breezingforms.eddy-vh.com).

Add a comment

ADVANCED LIST FILTER ON MULTI-SELECT LIST

Here it is explained how to apply Advanced List Filter in Content Builder on a Select List element when the "Multiple" checkbox is checked so that more options can be select at a time.

If Advanced List Filter is applied on a multi-select list and Filter is defined as follows, it will only search for records where only one value was selected, for example only value1.

value1

value2

value3

It will not show records that have both values value1 and value3 and as selected values, or value1 and value2.

 

To see all records that include a certain value of a multi-select list, possibly along with some other value, define the Filter as listed below:

@match/value1

@match/value2

@match/value3

 After defining the filter this way, all records including the value searched for will be shown.

Add a comment

Age restriction

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.

 

Add a comment

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here