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

我创建了一个工作的plunker here。

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

{{1}}

Answer 2

问题是我用css制作了真正的复选框和单选按钮，这样我就可以设计自定义的收音机和复选框按钮了。并且jQuery Validation不验证隐藏的输入字段。不知怎的很聪明但在我的情况下烦恼'

jQuery验证复选框和无线电未验证

2 个答案: