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

jQuery scroll to element


It’s very easy to scroll to particular element though jQuery

When we load the page that time window automatic scroll to element

Following script will do the trick.


    jQuery(window).scrollTop(jQuery('.YOUR_CLASS_NAME').offset().top);


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

How to play iFrame embedded YouTube video on click of a button.


In a recent my project I had to show and autoplay an embedded YouTube video on click of a button.

So if you just need to play the video on click and don’t need to know when it’s ended or do other things with it, that the YouTube API allows you to do, this is the solution you are looking for:

First we need a iframe Embed Code and simple link.

<a id="playVideo" href="#">Play Youtube Video</a>

< iframe id="youtubeVideo" width="560" height="315" src="https://www.youtube.com/embed/4ALbrJVt1u4" frameborder="0" allowfullscreen > < /iframe >

Then after we need to write simple jQuery function,

which on click just extends the YouTube video source with the autoplay parameter thus plays the video.

I also prevent the link from behaving like it normally would. Simple as that.

Following script should do the trick.


	jQuery(document).ready(function() {
		jQuery('#playVideo').on('click', function(ev) {
			jQuery("#youtubeVideo")[0].src += "&autoplay=1";
			ev.preventDefault();
		});
	});

I hope this will work for you and Maybe this is useful for you in the future. 😉

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

Prevent form submit from enter key pressed in jQuery.


How we disable form submit when enter key is pressed??

You have a form where in an input text box. If you enter a string and press enter then time your form will be submitting.

If you only want to disable the Enter key to submit the form, then you need to let its keypress event handler return false when the keycode matches 13.

Preventing form submission when Enter key is pressed will solved by following trick.


<form onkeypress="return event.keyCode != 13;">

I hope it will work for you. 🙂

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

How to remove alpha characters from string using jQuery


 
jQuery for remove alpha characters from string.

If your string is :

var myString = ‘<jainish> 143.8 Text’;

and you want numeric value, dot and dash in your string then you have to use following jQuery

var myString = myString.replace(/[^\d.-]/g, '');
alert(myString)

And output will be :

143.8

If you want only numeric value then Following should do the trick.

var myString = myString.replace(/[^\d]/g, '');
alert(myString)

And output will be :

1438

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

How to hide message after few seconds in jquery.


 

Many of you want to hide element after page loading in website.

Many of you might be wondering that Is it possible to automatically hide an element in a web page 5 seconds after the form loads using jQuery?

and the answer is : Yes, its possible to hide element after few seconds.

For hiding any message, div, element, container then following script will be helping you.

$(".successMessage").delay(5000).fadeOut('slow');
OR 
$(".successMessage").delay(5000).hide(1000);

Note :
Here 5000 stands for 5000 milliseconds that means your message, div or element will hide after 5 seconds.
Here 1000 stands for 1000 milliseconds ( 1 seconds ) that means your message, div or element will take 1 second for hide

I hope it will work for you also as it worked for me:)

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

Simple content slider


 
Now i am going to show you simple content slider. you just have to put small javascript code for slide your content.

It will never conflict with other javascript.

It will work only on previous and next arrow functionality.

CSS section :

<style type="text/css">
  li { display:none;}
  li.current{
    color:#ff0000;
    display:block;
  }
</style>

Javascript section :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script> 
$(document).ready(function(){

  $("#next").click(function(){
		
    total = $("#mobileMenu ul").children("li").length;
    cur = $("#mobileMenu ul li.current").index();
		
    $("#mobileMenu ul li").attr('class','normal');
		
    if(cur==(total-1)){
        $("#mobileMenu ul li").eq(0).attr('class','current');
    }else{
        $("#mobileMenu ul li").eq(cur+1).attr('class','current');
    }
  });


  $("#prev").click(function(){
		
    total = $("#mobileMenu ul").children("li").length;
    cur = $("#mobileMenu ul li.current").index();
		
    $("#mobileMenu ul li").attr('class','normal');
		
    $("#mobileMenu ul li").eq(cur-1).attr('class','current');
		
  });

});
</script>

HTML section :

<div id="mobileMenu">
  <ul>
    <li class="normal">
      <a href="/agentur/flugplan.html">First Slide</a>
    </li>
	
    <li class="current">
      <a href="/agentur/unsere-agentur.html">Second Slide</a>
    </li>
	
    <li class="normal">
      <a href="/agentur/unsere-leistungen.html">Third Slide</a>
    </li>
		
  </ul>
  
  <div class="arrow">
    <img id="prev" src="left_arrow.png" alt="Prev" />
    <img id="next" src="right_arrow.png" alt="Next" />
  </div>
</div>

You can set your design as you want.

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