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

我的输入类型单选和输入类型检查不知何故无法验证。不要收到错误 class，不要收到消息。

Answer 1

我创建了一个可用的 plunker here。

您错过了为复选框类型编写 errorPlacement：

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

Answer 2

问题是我用 css 隐藏了真正的复选框和单选按钮，这样我就可以设计自定义单选按钮和复选框按钮。 jQuery 验证不会验证隐藏的输入字段。不知何故很聪明，但在我看来很烦人'

jQuery 验证复选框和单选框未验证

jQuery Validation Checkbox and Radio not validating

jquery

jquery-validate