Опубликовано Оставить комментарий

CF7 сообщения

Сообщение формы – .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/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *