Сообщение формы – .wpcf7-response-output
So, following the Contact Form 7 documentation on DOM Events, I was able to get this working how I wanted with the following JS code:
/* Validation Events for changing response CSS classes */
document.addEventListener( 'wpcf7invalid', function( event ) {
$('.wpcf7-response-output').addClass('alert alert-danger');
}, false );
document.addEventListener( 'wpcf7spam', function( event ) {
$('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailfailed', function( event ) {
$('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {
$('.wpcf7-response-output').addClass('alert alert-success');
}, false );
How to modify Contact Form 7 Success/Error Response Output – https://wordpress.stackexchange.com/questions/282751/how-to-modify-contact-form-7-success-error-response-output
Сообщение об ошибке – .wpcf7-not-valid-tip
После каждого поля с валидацией может генерироваться сообщение об ошибке (класс .wpcf7-not-valid-tip) после переноса фокуса и начала исправление в поле это сообщение должно бы пропадать, но не пропадает
Варианты решения
При получении фокуса, сообщение об ошибке перестает выводится - следующий элемент после поля с классом .wpcf7-not-valid-tip
Проверено! Работает!
CSS
.wpcf7-form-control:focus + .wpcf7-not-valid-tip { display:none; }
Не проверялось
jQuery(document).ready(function() {
jQuery('.wpcf7-form').on('focusout','.wpcf7-form-control',function(){
if(jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).length && jQuery(this).val() != ''){
jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).remove();
}
})
})
Не проверялось
jQuery( ".wpcf7-form-control-wrap" ).click( function() {
jQuery('.wpcf7-not-valid-tip', this ).hide();
});
Не проверялось
jQuery(document).ready(function() {
jQuery('.wpcf7-form').on('focus','.wpcf7-form-control',function(){
if(jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).length){
jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).remove();
//or
//jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).hide();
//or
//jQuery('.wpcf7-not-valid-tip',jQuery(this).parent()).css('display','none');
}
})
})
Не проверялось
jQuery( ".wpcf7-form-control-wrap").hover( function() {
jQuery('.wpcf7-not-valid-tip', this ).hide();
});
Не проверялось
.wpcf7-form-control-wrap:hover .wpcf7-not-valid-tip{ display:none; }
Не проверялось
$(".wpcf7-form-control-wrap").mouseover(hideAlert);
function hideAlert(){
var $obj = $("span.wpcf7-not-valid-tip",this);
$obj.css('display','none');
}
form span.wpcf7-not-valid-tip{
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
background: #fff;
border: 1px solid #ff0000;
font-size: 12px;
padding: 2px 5px;
}
Contact form 7 validation error don’t disappear – https://fellowtuts.com/wordpress/contact-form-7-validation-error-dont-disappear/
В CF7 версии 3,6 перестало пропадать сообщение о неправильном заполнении полей – https://denis-creative.com/cf7-alert/
CF7 – https://vahro.ru/plugins/cf7/
Плагины – https://vahro.ru/other/plaginy/