Флажок проверки подлинности jQuery и радио не проверяется

Question

У меня возникли проблемы с проверкой jquery для проверки радио и проверки типов ввода.

<form class="form" data-validate="true"> 
     <fieldset> 
     <select class="custom-select custom-select___short" data-placeholder="Anrede" data-rule-selectRequired="true" data-msg-selectRequired="Eine Anrede muss ausgewählt werden"> 
      <option></option> 
      <option value="mr">Herr</option> 
      <option value="mrs">Frau</option> 
     </select> 
     </fieldset> 
     <fieldset> 
     <div class="input__text"> 
      <input type="text" id="surname" name="surname" data-rule-required="true" data-msg-required="Feld muss angegeben werden"/> 
      <label class="label" for="surname">Name</label> 
     </div> 
       </fieldset> 
     <fieldset> 
     <div class="input__text"> 
      <input type="text" id="prename" name="prename" data-rule-required="true" data-msg-required="Feld muss angegeben werden"/> 
      <label class="label" for="prename">Vorname</label> 
     </div> 
     </fieldset> 
     <fieldset> 
     <div class="input__text input__text___large"> 
      <input type="text" id="street" name="street" data-rule-required="true" data-msg-required="Feld muss angegeben werden"/> 
      <label class="label" for="street">Strasse</label> 
     </div> 
     <div class="input__text input__text___xs"> 
      <input type="text" id="house_number" name="house_number" data-rule-required="true" data-msg-required="Feld muss angegeben werden"/> 
      <label class="label" for="house_number">Nr.</label> 
     </div> 
     </fieldset> 
     <fieldset> 
     <div class="input__text input__text___small"> 
      <input type="number" id="zip" name="zip" data-rule-required="true" data-msg-required="Feld muss angegeben werden" data-rule-number="true" data-msg-number="Die PLZ muss eine Zahl sein"/> 
      <label class="label" for="zip">PLZ</label> 
     </div> 
     <div class="input__text input__text___medium"> 
      <input type="text" id="city" name="city" data-rule-required="true" data-msg-required="Feld muss angegeben werden"/> 
      <label class="label" for="city">Ort</label> 
     </div> 
     </fieldset> 
     <fieldset> 
     <div class="input__text"> 
      <input type="email" id="email" name="email" data-rule-required="true" data-msg-required="Feld muss angegeben werden" data-rule-email="true" data-msg-email="Ungültiges E-Mail Format"/> 
      <label class="label" for="email">Email</label> 
     </div> 
     </fieldset> 
     <fieldset> 
        <input class="input__radio" type="radio" name="radio" id="rad1" data-rule-required="true" data-msg-required="true" value="accepted"><label for="rad1" class="label__radio label">Radio input</label> 
       </fieldset> 
     <fieldset> 
        <input class="input__checkbox" type="checkbox" name="agree" id="check1" data-rule-required="true" data-msg-required="true" value="yes"><label for="check1" class="label__checkbox label">Checkbox input</label> 
       </fieldset> 
     <button type="submit">Online Anmelden</button> 
    </form> 

И мой JS

$('form[data-validate="true"]').validate({ 
     onfocusout: function(element) { 
      $(element).valid(); 
     }, 

     errorPlacement: function(error, element) { 
      if ($(element).is('select')) { 
       error.insertAfter($(element).next('.select2')); 
      } else if ($(element).is('input[type="radio"]') || $(element).is('input[type="check"]')) { 
       error.insertAfter($(element)); 
      } else { 
       error.appendTo($(element).closest('div')); 
      } 
     } 
    }); 

    /** 
    * Adding additional validator methods 
    */ 
    $.validator.addMethod('selectRequired', function(value) { 
     return value !== ''; 
    }); 

Как-то мой тип ввода радио и проверка ввода типа не будет подтверждено. Не получите класс ошибки, не получите сообщение.

Answer 1

Я создал рабочий плункер here.

Вы пропустили написать errorPlacement для типа CheckBox:

else if ($(element).is('input[type="checkbox"]') || $(element).is('input[type="check"]')) { 
      error.insertAfter($(element)); 
     } 

Answer 2

Проблема заключалась в том, что я сделал реальные флажки и радиокнопки с помощью CSS невидимым, так что я могу дизайн кнопок флажок на заказ радио и. И проверка jQuery не проверяет скрытые поля ввода. Как-то довольно умен, но в моем случае annoyin '