jQuery Validation Checkbox and Radio not validating

Question

I'm having trouble with jquery validation to validate the radio and check input types.

<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>

And my 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 !== '';
    });

Somehow my input type radio and input type check won't be validated. Don't get the error class, don't get the message.

[jquery validation is not getting fired for checkboxes](https://stackoverflow.com/q/18928092/2943403) — mickmackusa, Dec 15 '20 at 01:28

score 0 · Accepted Answer · answered Jun 16 '16 at 10:29

0

I've created a working plunker here.

You missed to write the errorPlacement for the checkbox type:

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

answered Jun 16 '16 at 10:29

Bellu

2,575
2
22
29

Thanks, problem was beside the checkbox thing, that i made true inputs (check and radio) box invisible with css to style custom checkboxes and radio buttons. Somehow jquery validation doesn't like that. – Marcel Bührig Jun 16 '16 at 11:32

score 0 · Answer 2 · answered Jun 16 '16 at 11:34

0

The Problem was that I made the real checkboxes and radio buttons with css invisible, so that I can design custom radio and checkbox buttons. And jQuery Validation doesn't validate hidden input fields. Somehow quite smart but in my case annoyin'

answered Jun 16 '16 at 11:34

Marcel Bührig

105
2
11

1

You realize you can disable this option by setting `ignore` to `[]`. Then all elements including hidden will be validated. – Sparky Jun 16 '16 at 12:45

jQuery Validation Checkbox and Radio not validating

2 Answers2