Add class error-field / valid-field to parent in realtime

[Gregoire]

Hi,

First of all, fantastic plugin to increase the accessibility of forms : « Well done and thanks 🙂 ! ». I don’t understand why all forms plugin don’t implement the realtime checker functionality by default ?!

However, I had doubts at the beginning because when I activated your plugin it was in conflict with an other plugin « Message Popup For Contact Form 7 » which couldn’t show the popup message. But, I finally resolved this conflict by remove this lines from your file « jvcf7_validation.js » and they finally work together like a charm (it could be an answer to an other of your user who have the same issue) :

jQuery(‘.wpcf7-form-control.wpcf7-submit’).click(function(e){
$jvcfpValidation = jQuery(this).parents(‘form’);
if (!jQuery($jvcfpValidation).valid()){
e.preventDefault();
$topErrorPosition = jQuery(‘.wpcf7-form-control.error’).offset().top;
$topErrorPosition = parseInt($topErrorPosition) – 100;
jQuery(‘body, html’).animate({scrollTop:$topErrorPosition}, ‘normal’);
}
});

Now, I still have one problem. I want to change in realtime the parent class of field which has an error / valid class in realtime thanks to your plugin.

I tried this javascript code :

// to remove the class valid after submitted the form

$(“button”).on(“click tap”, function() {

setTimeout(function() {

$(“.input_email”).removeClass(“valid-field”);
$(“.valid”).removeClass(“valid”);

}, 400);
});

// to give the class error-field / valid-field to the parent not in realtime

$(document).on(“click tap keydown keypress”, function() {

if ($(“input”).hasClass(“error”)) {
$(‘.error’).parents(“.input_email”).addClass(“error-field”);
}

if ($(“input”).hasClass(“valid”)) {
$(‘.valid’).parents(“.input_email”).addClass(“valid-field”);
} else {
$(‘.error’).parents(“.input_email”).removeClass(“valid-field”);
}

});

// to remove all class when I restart to write my input

$(“#section_newsletters input”).on(“click tap”, function(event1) {
event1.stopPropagation();

$(this).removeClass(“wpcf7-not-valid”);
$(this).removeClass(“error”);
$(this).next().next(“.wpcf7-not-valid-tip”).remove();
$(this).parents(“.input_email”).removeClass(“error-field”);
$(this).removeClass(“valid”);
$(“.valid”).parents(“.input_email”).removeClass(“valid-field”);
$(“.valid”).parents(“.input_email”).addClass(“valid-field”);

});

// to give the class error-field / valid-field to the parent in realtime

$(“#section_newsletters input”).on(“keydown keypress”, function(event2) {
event2.stopPropagation();

if ($(this).hasClass(“error”)) {
$(this).parents(“.input_email”).addClass(“error-field”);
} else {
$(this).parents(“.input_email”).removeClass(“error-field”);
}
if ($(this).hasClass(“valid”)) {
$(this).parents(“.input_email”).addClass(“valid-field”);
} else {
$(this).parents(“.input_email”).removeClass(“valid-field”);
}

});

It’s working but with a latency of one character / one keyboard touch : « When I start to complete my field, it change my parent class after I press a second time an other touch because it need to have at first the error / valid class in the input to work in real time. ». I tried a lot of things like setTimeout() but they don’t worked.

I’m sorry to don’t provide you an URL (because I work on localhost) but if you want I could send you a video of my problem.

Thanks in advance for your future answer and again thanks for you wonderful plugin.

Grégoire

[Dinesh]

Hi,

Thank you so much for loving our plugin.

First wanted to know why you want to achieve this

” Now, I still have one problem. I want to change in realtime the parent class of field which has an error / valid class in realtime thanks to your plugin. ”

Thanks

[Grégoire]

Hi,

Thank you for your quick response.

I need to give an error-field / valid-field class to the parent « in real time » of the input to change the color of the icons before and after the input.

The icon is given by pseudo-elements ::before and ::after that I can not give to an input element :

<form action=”/#wpcf7-f1587-o1″ method=”post” class=”wpcf7-form theme_0 noErrorMsg init” aria-label=”Formulaire de contact” novalidate=”novalidate” data-status=”init”>
<div style=”display: none;”>
<input type=”hidden” name=”_wpcf7″ value=”1587″>
<input type=”hidden” name=”_wpcf7_version” value=”5.7.5.1″>
<input type=”hidden” name=”_wpcf7_locale” value=”fr_FR”>
<input type=”hidden” name=”_wpcf7_unit_tag” value=”wpcf7-f1587-o1″>
<input type=”hidden” name=”_wpcf7_container_post” value=”0″>
<input type=”hidden” name=”_wpcf7_posted_data_hash” value=””>
</div>
<div class=”wpcf7-response-output” aria-hidden=”true”></div>
<div class=”input_email valid-field”>
::before
<p>
<span class=”wpcf7-form-control-wrap” data-name=”your-email”>
<input size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email email required valid” aria-required=”true” aria-invalid=”false” placeholder=”Taper votre adresse email …” value=”” type=”email” name=”your-email”>
<label id=”your-email-error” class=”error” for=”your-email” style=”display: none;”></label>
</span>
</p>
::after
</div>
<div class=”bouton_submit”>
<p>
<button class=”wpcf7-form-control has-spinner et_pb_button et_pb_bg_layout_light wpcf7-submit” type=”submit” value=”S’INSCRIRE À NOTRE NEWSLETTER”>S’INSCRIRE À NOTRE NEWSLETTER</button>
<spanclass=”wpcf7-spinner”></span>
</p>
</div>
</form>

Like I said on my previous message, I succeed to change the class to the parent but not in real time like you did for the input. I have a latency of one character :-/

Thanks for your future answer 🙂

Gregoire

[Dinesh]

Hi,

Please use this code. You can remove other and this should work fine.

jQuery(‘form.wpcf7-form’).keypress(function(){
console.log(‘INPUT CHANGED’);
YOUR CLASS CONDITION CODE HERE>
});

Hope this helps.

Thanks

[Grégoire]

Hi,

Thanks for your answer despite it doesn’t help me.

I already add the keydown / keypress function on my code but what I wanted it’s to add a « setTimeout(function() {}, 400) » to the keydown / keypress function. But the setTimeout doesn’t work with keydown / keypress function.

BUT, I finally found something which working.

I made a function which add some delay to my keydown / keypress function.

So this code below works if some other users need to give like me a class to the parent element synchronized to your class « error / valid » provided by your plugin 🙂 :

jQuery(document).ready(function($) {

function delay(callback, ms) {
var timer = 0;
return function() {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(context, args);
}, ms || 0);
};
}

$(“button”).on(“click tap”, function() {

setTimeout(function() {

$(“.input_email”).removeClass(“valid-field”);
$(“.valid”).removeClass(“valid”);

}, 400);
});

$(document).on(“click tap keydown keypress”, function() {

if ($(“input”).hasClass(“error”)) {
$(‘.error’).parents(“.input_email”).addClass(“error-field”);
}

if ($(“input”).hasClass(“valid”)) {
$(‘.valid’).parents(“.input_email”).addClass(“valid-field”);
} else {
$(‘.error’).parents(“.input_email”).removeClass(“valid-field”);
}

});

$(“#section_newsletters input”).on(“click tap”, function(event1) {
event1.stopPropagation();

$(this).removeClass(“wpcf7-not-valid”);
$(this).removeClass(“error”);
$(this).next().next(“.wpcf7-not-valid-tip”).remove();
$(this).parents(“.input_email”).removeClass(“error-field”);
$(this).removeClass(“valid”);
$(“.valid”).parents(“.input_email”).removeClass(“valid-field”);
$(“.valid”).parents(“.input_email”).addClass(“valid-field”);

});

$(“#section_newsletters input”).on(“keydown keypress”,delay(function(event2) {
event2.stopPropagation();

if ($(this).hasClass(“error”)) {
$(this).parents(“.input_email”).addClass(“error-field”);
} else {
$(this).parents(“.input_email”).removeClass(“error-field”);
}
if ($(this).hasClass(“valid”)) {
$(this).parents(“.input_email”).addClass(“valid-field”);
} else {
$(this).parents(“.input_email”).removeClass(“valid-field”);
}

}, 500));

});

I couldn’t add a video to this chatbox support but it’s wonderful 😀 !

Thanks again for your plugin 😉

[Grégoire]

Hi,

A last request, how I can start your plugin adding class « valid » or « error » at the first focus on the input ?

What I mean, it’s your plugin adding those class after we submit or after we focusout but if I wanted to add those class at the first focus, what I have to modify on your plugin files to do that ?

Thanks in advance for your future answer 😌

[Author]

Posts