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