Kontrola vyplněných údajů ve formulářích

[Spouter]

Jak máte vyřešenu kontrolu polí ve formulářích ve verzi 1.7? Jsem se zděsil, že standardní kontrola například při registraci nového zákaznického účtu je jen pomocí fokusování na první nevyplněné políčko. Když zákazník nevyplní více polí, tak se nic nezvýrazní např. červené pozadí u políčka, červený křížek ba ani se neukáže chybová hláška.

Tohhle přeci nikdo nemůže v ostrém provozu používat? Zákazník například zapomene vyplnit políčko příjmení a podmínky ochrany osobních údajů a místo aby se obě políčka označila a vypsaly se chybové hlášky u těchto políček, tak se zobrazí jen basic prohlížečová chybová hláška "pole je povinné" a to jen u toho prvního nevyplněného pole. Nic se nezvýrazní, že je nutné doplnit / vyplnit....

Řešíte to nějak po svém? Máte to nějak overridnuté nebo je na to nějaký modul?

[Spouter]

Tak jsem si kontrolu políček napsal sám - funguje to na přihlašovací formulář, registrační formulář (ověřuje to PSČ i telefon, telefon jen pro ČR a SR), formulář s adresou, formulář s osobními údaji. Dále je upraven poslední krok strandarního objednávkového procesu a to "Platební metoda". Funguje zde kontrola zatržení obch. podmínek a kontrola výběru platební metody.

Kód stačí přidat do "(document).ready" např. v .js souboru vzhledu.

function IsEmail(email) {
  var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(!regex.test(email)) {
    return false;
  }else{
    return true;
  }
}

function IsPostcode(postcode) {
  var regex = /^[0-9]{3} [0-9]{2}$/;
  if(!regex.test(postcode)) {
    return false;
  }else{
    return true;
  }
}                                                        

function IsPhone(tel) {
  var regex = /^((\+420)|(\+421))?( )?[0-9]{3}( )?[0-9]{3}( )?[0-9]{3}$/;
  if(!regex.test(tel)) {
    return false;
  }else{
    return true;
  }
}


function betterFormValidation() { 

  var form = $('#content form button[type=submit]').closest('form');
  var formValue = form.find(':input:not(:hidden)').serialize();
                                                                                            
      $(form).find('input[type="email"][required]').not('input[type="hidden"]').each(function() {
        if(!IsEmail(this.value)) {
          if (!$(this).hasClass('error-mail')) {
            $(this).addClass('error-mail');
            $(this).addClass('errc');         
            $(this).after('<div class="error-msg-mail"> E-mailová adresa má chybný formát.</div>');
          }
        }
        else {        
            $(this).removeClass('error-mail');
            $(this).removeClass('errc');
            $(this).next(".error-msg-mail").remove();         
        }              
      });
      
      $(form).find('input[type="text"][required][name="postcode"]').not('input[type="hidden"]').each(function() {
        if(!IsPostcode(this.value)) {
          if (!$(this).hasClass('error-postcode')) {
            $(this).addClass('error-postcode');
            $(this).addClass('errc');     
            $(this).after('<div class="error-msg-postcode">PSČ má chybný formát. Nezapomeňte na mezeru. Příklad PSČ: "123 01".</div>');
          }           
        }
        else {       
            $(this).removeClass('error-postcode');
            $(this).removeClass('errc');
            $(this).next(".error-msg-postcode").remove(); 
        }              
      }); 
      
      $(form).find('input[type="tel"][required][name="phone"]').not('input[type="hidden"]').each(function() {
        if(!IsPhone(this.value)) {
          if (!$(this).hasClass('error-phone')) {
            $(this).addClass('error-phone');
            $(this).addClass('errc');     
            $(this).after('<div class="error-msg-phone">Telefon má chybný formát. Zadávejte ve formátu např.: "+420 777 123 456 nebo +420 777123456".</div>');
          }           
        }
        else {       
            $(this).removeClass('error-phone');
            $(this).removeClass('errc');
            $(this).next(".error-msg-phone").remove(); 
        }              
      });            
      
      $(form).find('input[name="password"][required]').not('input[type="hidden"]').each(function() {
        if(this.value.length < 5) {
          if (!$(this).hasClass('error-password')) {
            $(this).addClass('error-password'); 
            $(this).addClass('errc');    
            $(this).after('<div class="error-msg-pswd"> Heslo má chybný formát. Heslo musí být minimálně 5 znaků dlouhé.</div>');
          } 
        } 
        else {        
            $(this).removeClass('error-password');
            $(this).removeClass('errc');
            $(this).next(".error-msg-pswd").remove();
        }             
      });
                                                                                 
      $(form).find('input[type="checkbox"][required]').each(function() {
        if($(this).prop("checked") == false) {
          if(!$(this).hasClass('error-checkbox')) {
            $(this).addClass('error-checkbox');
            $(this).addClass('errc'); 
            $(this).before('<div class="error-msg">Je nutné zaškrtnout povinné políčko.</div>');
          }
        }
        else {
            $(this).removeClass('error-checkbox');
            $(this).removeClass('errc');
            $(this).prev(".error-msg").remove(); 
        }              
      });
      
      $(form).find('input[type="text"][required], input[type="email"][required], input[type="password"][required], input[type="tel"][required]').not('input[type="hidden"]').each(function() {
        if(this.value == '') {
          if (!$(this).hasClass('error-blank')) {
            $(this).addClass('error-blank');
            $(this).addClass('errc');       
            $(this).after('<div class="error-msg">Pole je povinné - je nutné jej vyplnit.</div>');
          }
        }
        else {       
            $(this).removeClass('error-blank');
            $(this).removeClass('errc');
            $(this).next(".error-msg").remove(); 
        }     
      }); 
      
     if ($('.errc').length == 0) {
      return true;
     }
     else {
      return false;
     }  
              
}

$('#content form button[type=submit]').on('click', function (event) {
        
    var form = $(this).closest('form');
    $(form).addClass('form-submited');
    
    if (!betterFormValidation()) {
      event.preventDefault();
    }
      
});

$('#content form input').focusout(function(){
  
    if ($(this).closest('form').hasClass("form-submited")) {
      betterFormValidation();
    }  
});

$('#content form input').keyup(function(){

    if ($(this).closest('form').hasClass("form-submited")) {
      betterFormValidation();
    }  
});

$('#content form input[type=checkbox]').on('click', function () {

    if ($(this).closest('form').hasClass("form-submited")) {
      betterFormValidation(); 
    } 
});


// Formulář u platební metody

var textButton = $('#payment-confirmation button[type=submit]').text();
$('#payment-confirmation button[type=submit]').after('<a class="abtn-confirm">'+textButton+'</a>');
$('#payment-confirmation button[type=submit]').addClass('no-display');

function betterPaymentValidation() {
   
    var divPayment = $('#payment-confirmation button[type=submit]').closest('#checkout-payment-step');
    var numChecked = 0;
    
      $(divPayment).find('input[type="radio"][name="payment-option"][required]').each(function() {
        if ($(this).prop("checked") == false) {
            $(this).addClass('error-payment-method');
            $(this).parent().addClass('errc');          
        }
        else {
            numChecked++;
        }  
      }); 
      
      var numMethods = $('input[type="radio"][name="payment-option"][required]').length;
      
      if (numChecked == 0 && $('.error-msg-payment').length == 0) { 
          $('#checkout-payment-step .payment-options').before('<div class="error-msg-payment">Musíte si vybrat jednu platební metodu.</div>');
      }
      
      if(numChecked >= 1) {         
       $('.payment-option .custom-radio').removeClass('errc');
       $("#checkout-payment-step .error-msg-payment").remove();
      }
      
      $(divPayment).find('input[type="checkbox"][required]').each(function() {
        if($(this).prop("checked") == false) {
          if(!$(this).hasClass('error-checkbox')) {
            $(this).addClass('error-checkbox');
            $(this).addClass('errc'); 
            $(this).parent().parent().before('<div class="error-msg">Objednávku nelze dokončit bez souhlasu s podmínkami.</div>');
            $('#payment-confirmation button[type=submit]').addClass('no-display');
            $('.abtn-confirm').show();
          }
        }
        else {
            $(this).removeClass('error-checkbox');
            $(this).removeClass('errc');
            $(this).parent().parent().prev(".error-msg").remove(); 
        }              
      });

     if ($('.errc').length == 0) {
      return true;
     }
     else {
      return false;
     }                 
}

var checkMethod = $('input[type="radio"][name="payment-option"][required]:checked').length;
var numCheckboxes = $('input[type="checkbox"][required]').length;
var checkCheckboxes = $('input[type="checkbox"][required]:checked').length;

if ((checkCheckboxes == numCheckboxes) && checkMethod >= 1) {
  $('.abtn-confirm').hide();
  $('#payment-confirmation button[type=submit]').removeClass('no-display');
  $('#payment-confirmation button[type=submit]').removeClass('disabled');
}


$('#payment-confirmation button[type=submit], .abtn-confirm').on('click', function (event) {

    $('#checkout-payment-step').addClass('order-submited');
      
    if (!betterPaymentValidation()) {
      event.preventDefault();
    }
    else {
      $('.abtn-confirm').hide();
      $('#payment-confirmation button[type=submit]').removeClass('no-display');
    }         
});

$('#checkout-payment-step input[type=checkbox], #checkout-payment-step input[type=radio]').on('click', function () {

  if ($('#checkout-payment-step').hasClass('order-submited')) {
    if (betterPaymentValidation()) {
      $('.abtn-confirm').hide();
      $('#payment-confirmation button[type=submit]').removeClass('no-display');
    } 
  }
});

Dále je nutné přidat stylování opět například do .css souboru vzhledu.

.error-blank, .error-mail, .error-password, .error-postcode, .error-checkbox, .error-checkbox+span {
border-color: red!important;
}

.error-msg, .error-msg-payment {
color: red!important;
}

#checkout-payment-step .float-xs-left {
margin-top:5px;
}

#checkout-payment-step #payment-confirmation {
text-align:right;
}

body#checkout .condition-label {
margin-top:0;
}

.abtn-confirm {
font-weight: 400;
font-size: 14px;
border: none;
line-height: 25px;
box-shadow: none;
padding: 5px 20px;
border-radius: 5px;
display: inline-block;
background: #1d1d1d;
color: #ffffff;
cursor:pointer;
}

.abtn-confirm:hover {
color:#fff;
background:#146CDA;
}

.errc {
border-color:red;
}

.no-display {
display:none!important;
}

body#checkout .additional-information {
    margin-top: 0px;
    margin-bottom: 30px;
}

U CSS je důležité přizpůsobit třídu .abtn-confirm a .abtn-confirm:hover, tak aby odpovídal vzhledu potvrzovacího tlačítka.