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