How to apply custom validation in powermail extension of typo3.


How to apply custom validation in powermail extension of typo3.

Many time we need to integrate custom javascript validation.

Here i have develop some javascript code for apply custom validation in powermail form [ its same as i did in js_contact_form extension. it will available here]

First we need to add some configuration in form element.

here we need to add extra attribute with red color text in following path.

typo3conf/ext/powermail/Private/Templates/Form/Form.html

<f:form
	action="{action}"
	name="field"
	enctype="multipart/form-data"
	additionalAttributes="{vh:Validation.EnableParsleyAndAjax(form:form)}"
	class="form-light mt-20 powermail_form_{form.uid} {form.css} {vh:Misc.MorestepClass(activate:settings.main.moresteps, class:'powermail_morestep')}"
	id="powermail-form-{form.uid}" 
	onsubmit="return powerMailFormValidate(this.id);" >

Following script you need to include in your project


// BEGIN 

< script type="text/javascript" >

function powerMailFormValidate(id) {

    var cValids = 0;

    jQuery("#"+id+" .form-control").removeClass("error");
    
    jQuery("#"+id+" .form-control").each(function(){
        if(jQuery(this).val()==''){
            var validate = jQuery(this).attr("data-parsley-required");
            if(validate=="true"){
                jQuery(jQuery(this)).addClass("error");    
                var placeholder = jQuery(this).attr('placeholderold');
                //var messge = placeholder+" : "+jQuery(this).attr('data-parsley-required-message');
                //jQuery(this).attr("placeholder",messge.replace('*', ''));
                var messge = placeholder+jQuery(this).attr('data-parsley-required-message');
                jQuery(this).attr("placeholder",messge.replace('*Dieses Feld ', ''));
                cValids = 1;
            }
        }else{
            var dataType = jQuery(this).attr("data-parsley-type");

            if(dataType=="email"){

                if(jQuery(this).length > 0){
                    var email = jQuery(this).val();
                    if(email!=""){
                        if(!checkValidEmail(email)) {
                            jQuery(this).val("");
                            jQuery(jQuery(this)).addClass("error");    
                            var messge = jQuery(this).attr('data-parsley-error-message');
                            jQuery(this).attr("placeholder",messge);
                            cValids = 1;
                        }
                    }
                }    
            }
        }
    });

    if(cValids == 1) { 
        jQuery(".parsley-errors-list, .parsley-required").css("display","none"); 
        return false;
    }
}

function checkValidEmail(val) {
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(val)) {
        return false;
    }
    return true;
}

function trim(field){
    return jQuery.trim(field.val());
}

jQuery(document).ready(function() {

    jQuery(".form-control").each(function(){
        jQuery(this).attr("placeholderold",jQuery(this).attr('placeholder'));
    });
    
    jQuery(".form-control").blur(function(){

        var validate = jQuery(this).attr("data-parsley-required");

        if(trim(jQuery(this))==""){
            if(validate=="true"){
                jQuery(this).val("");
                jQuery(jQuery(this)).addClass("error");    
                var placeholder = jQuery(this).attr('placeholderold');
                var messge = placeholder+jQuery(this).attr('data-parsley-required-message');
                
                jQuery(this).attr("placeholder",messge.replace('*Dieses Feld ', ''));
            }
        }else{

            jQuery(this).removeClass("error");

            var dataType = jQuery(this).attr("data-parsley-type");

            if(dataType=="email"){

                if(jQuery(this).length > 0){
                    var email = jQuery(this).val();
                    if(email!=""){
                        if(!checkValidEmail(email)) {
                            jQuery(this).val("");
                            jQuery(jQuery(this)).addClass("error");    
                            var messge = jQuery(this).attr('data-parsley-error-message');
                            jQuery(this).attr("placeholder",messge);
                            cValids = 1;
                        }
                    }
                }    
            }
        }
    })
    
    jQuery(".form-control").keyup(function(){
        
        if(trim(jQuery(this))!=""){
            jQuery(this).removeClass("error");
        }else{
            var validate = jQuery(this).attr("data-parsley-required");
            if(validate=="true"){
                jQuery(this).addClass("error");
            }
        }
    })
});
< /script >


// END

I hope this will work for you and make your day.

Note: Must need to enable in JavaScript Browser Validation

plugin.tx_powermail.settings.validation.client = 1

Above validation message will display as placeholder.

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

Advertisements

How to access typoscript settings data in typo3 extension


How to access typoscript settings data or flexform setting data in typo3 extension

We can easily get setting data in controller file by using following code

$this->settings;

If we want to get that data in other files like repository, service that we need to use following code

$objectManager = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\\CMS\\Extbase\\Object\\ObjectManager');

$configurationManager = $objectManager->get('TYPO3\\CMS\\Extbase\\Configuration\\ConfigurationManagerInterface'); 

$setting = $configurationManager->getConfiguration(
    \TYPO3\CMS\Extbase\Configuration\ConfigurationManagerInterface::CONFIGURATION_TYPE_SETTINGS
);

Just print the $setting and you will get all typoscript settings data.

I hope above code will work for you and made your day 😉 enjoy 🙂

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to upload image in frontend side of typo3 extension development


Here from a form to upload a small controller function into extbase images:

Whenever we upload image from frontend side that every time we must need to check image is exist or not. if image is exists then we need to rename image with unique name.

Following code will help you for how to image upload from frontend side with clean file name

<?php

  // check the form is submit
  if ($this->request->hasArgument('submit')){
    
    // Get all submitted post data 
    $userData = $this->request->getArguments();

    // media is stand for your file name [ you will get data of image]

    $file['name']    = $userData['media']['name'];
    $file['type']    = $userData['media']['type'];
    $file['tmp_name']  = $userData['media']['tmp_name'];
    $file['size']    = $userData['media']['size'];

    // Store the image file
    $files = $this->uploadFile($file['name'], $file['type'], $file['tmp_name'], $file['size']);  
  }


  /**
   * uploadFile
   * @param $name
   * @param $type
   * @param $temp
   * @param $size
   * @return
  */
    
  protected function uploadFile($name, $type, $temp, $size) {
    
    if($size > 0) {
      $basicFileFunctions = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('t3lib_basicFileFunctions');
      
      // upload folder path
      $uploadPath = 'fileadmin/user_upload/jainish';
      
      $name = $basicFileFunctions->cleanFileName($name);
      $uploadPath = $basicFileFunctions->cleanDirectoryName($uploadPath);
      $uniqueFileName = $basicFileFunctions->getUniqueName($name, $uploadPath);
      $fileStored = move_uploaded_file($temp, $uniqueFileName);
      
      $returnValue = basename($uniqueFileName);
    }
    
    return $returnValue;
  }
?>

I hope above code will work for you and made your day 😉 enjoy 🙂

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to set custom label in index search extension of typo3.


Following typoscript will used for set label via typoscript for index search extension

 plugin.tx_indexedsearch._LOCAL_LANG.de{
      default_search_word_entry = Suche
      submit_button_label = Suchen
      opt_type_0 = Distinct word = Ganzes Wort
      opt_type_1 = Part of word = Ein Teil des Wortes
      opt_type_2 = First part of word = Erster Teil des Wortes
      opt_type_3 = Last part of word = Letzter Teil des Wortes
      opt_type_10 = Sounds like = Klingt wie
      opt_type_20 = Sentence = Satz
      opt_defOp_0 = Aller Wörter (UND)
      opt_defOp_1 = Aller Wörter (ODER)
      opt_sections_0 = Ganze Seite
      opt_sections_-1 = Nur diese Seite
      opt_sections_-2 = Top + level 1
      opt_sections_-3 = Level 2 and out
      opt_freeIndexUid_-1 = Alle, vermischt/gemischt
      opt_freeIndexUid_-2 = Alle, kategorisiert
      opt_freeIndexUid_0 = Seiten
      opt_freeIndexUid_header_-1 = Mixed categories = gemischte/vermischte Kategorien
      opt_freeIndexUid_header_0 = Website Pages
      opt_media_-1 = All media = Alle Medien
      opt_media_0 = Internal pages = Interne Seiten
      opt_media_-2 = Alle Externen
      opt_order_rank_flag = Weight/Frequency
      opt_order_rank_freq = Frequency = Häufigkeit
      opt_order_rank_first = Close to top
      opt_order_rank_count = Number of words = Anzahl der Wörter
      opt_order_mtime = Date Modified = Datum bearbeitet
      opt_order_title = Document title = Dokumenttitel
      opt_order_crdate = Creation date = Erstelldatum
      opt_group_sections = Bereichhierarchie
      opt_group_flat = Flat list
      opt_lang_-1 = All languages = Alle Sprachen
      opt_lang_0 = Default = Voreinstellung
      opt_desc_0 = Highest first = Höchstes/Höchster zuerst
      opt_desc_1 = Lowest first = Niedrigstes/Niedrigster zuerst
      opt_RL1 = Level 1:
      opt_RL1ALL = All pages on level 1
      opt_RL2 = - Level 2:
      opt_RL2ALL = - All pages on level 2
      form_legend = Suchformular
      form_searchFor = Suche nach:
      form_extResume = Extended resume = Erweiterte Vorschau
      form_atATime = at a time = Zu einem Zeitpunkt
      form_orderBy = Order by: = Ordnen nach:
      form_fromSection = From section: = Aus dem Bereich
      form_freeIndexUid = Category: = Kategorie:
      form_searchIn = Search in: = Suche in:
      form_match = Match: = Ãœbereinstimmung
      form_style = Style: = Stil:
      rules_header = Rules: = Regeln:
      rules_text = Only words with 2 or more characters are accepted = Das Wort muss 2 oder mehr Buchstaben enthalten
Max 200 chars total
Space is used to split words, "" can be used to search for a whole string (not indexed search then)
AND, OR and NOT are prefix words, overruling the default operator
+/|/- equals AND, OR and NOT as operators.
All search words are converted to lowercase.
      searchFor = Suche nach
      searchFor_or = or = oder
      searchFor_and = and = und
      searchFor_butNot = but not = aber nicht
      noResults = Keine Resultate.
      inSection = in the section = in dem Bereich
      inNsection = in %s section:
      inNsections = in %s sections:
      word_page = page
      word_pages = pages
      unnamedSection = Andere
      link_regularSearch = Regular search = normale Suche
      link_advancedSearch = Advanced search = erweiterte Suche
      res_path = Pfad
      res_modified = Ãœberarbeitet
      res_created = Erstellt:
      res_size = Größe
      res_noResume = Notiz: Keine übereinstimmungen gefunden. Die Seitenvorschau kann nicht angezeigt werden.
      res_otherMatching = übereinstimmende Seiten im gleichen Dokment:
      res_otherPageAsWell = INFO: There was another page indexed as well... Probably indexed with another or no usergroup.
      res_memberGroups = Require membership of group numbers %s
      pi_list_browseresults_prev = <>
      pi_list_browseresults_display = Zeige ###TAG_BEGIN###%s bis  %s###TAG_END### von  ###TAG_BEGIN###%s###TAG_END###
      local_operator_AND = AND = UND
      local_operator_OR = OR = ODER
      local_operator_NOT = NOT = NICHT
      makerating_addToCurrentSearch = Add to current search words = Zu den aktuellen Suchwörtern hinzufügen
      maketitle_matches = matches = übereinstimmend / übereinstimmende Ergebnisse
}

Above label is for german language.

if we want to change for other language like italy then we can use following script

plugin.tx_indexedsearch._LOCAL_LANG.it

Note : it is stand for language code

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How do we get root page id and root page title of current page in typo3


If we are on 3rd level of page that time we need root page id of current page then following script will help you more.

$GLOBALS['TSFE']->rootLine[0]['uid'];

you will get root page id of current page

Id you want to root page title then you may use following script

$GLOBALS['TSFE']->rootLine[0]['title'];

If you want all the level of the page tree then you will get array all array from following script

Simply print the following function you will get all level of page tree

$GLOBALS['TSFE']->rootLine;

I hope it will work for you and make your day 😉

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to set class to image of tt_content element in typo3


Many time we need to add class to image of tt_content element.

Following script will help you for add class to image element or you can set your own style to image.

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = layout
  default = TEXT
  default.value = class="YOUR-CLASS-NAME"
}

OR 

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = layout
  default = TEXT
  default.value = style="display:block;"
}

Above script will help for set default class to image.

If we want to set some style to second image and third image then following script will help you more.

tt_content.image.20.1.params.cObject = CASE
tt_content.image.20.1.params.cObject {
  key.field = layout
  default = TEXT
  default.value = class="class1"
  1 = TEXT
  1.value = class="class2"
  2 = TEXT
  2.value = class="img-responsive"
}

It will also help you when we want to add class related with responsive layout.

I hope it will work for you and make your day 😉

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

How to set condition based upon template selection in fluid flux templating + typo3


Some time we need to set condition based upon template selection in fluid flux templating

Following script will help you more.

[globalVar = TSFE:page|tx_fed_page_controller_action = js_fuxtemplate->NewsLetter]

  YOUR CODE WILL BE HERE../.

[end]

Note: 
tx_fed_page_controller_action is stand for field name
js_fuxtemplate is stand for extension name
NewsLetter is stand for template name which are assign inside template

we can set some condition based upon other page field

i hope it will make you more happy 🙂

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya