jquery флажок не работает при использовании jquery validate plugin

Question

Я использую jquery плагин проверки с jquery шагами, для продолжения необходимо установить флажок на первом шаге. И проверка флажка не работает. вот код

<form class="dropzone" id="mydropzone" enctype="multipart/form-data" action="/" accept-charset="UTF-8" method="post">
  <div>
    <h3>Basic Info</h3>
    <section>
      <h3>Basic Info</h3>
      <label for="name">Name</label><br>
      <input class="required" type="text" value="" name="name" id="name" />

      <label for="email">Email</label><br>
      <input class="required" type="email" value="" name="email" id="email" />

      <label for="terms">
        <input type="checkbox" name="terms" id="terms">
        <span class="check-box-text">terms and conditions</span>
      </label>

    </section>
    <h3>Upload Photo(s)</h3>
    <section>
      <h3>Upload Photo(s)</h3>

      <div id="dropzonePreview" class="dzonebox"><span class="text-center">Drop files here to upload</span></div>
    </section>
  </div>
</form>

вот код javascript, который я использую

<script type="text/javascript">
var verticalForm = $("#mydropzone");

verticalForm.validate({
  errorPlacement: function errorPlacement(error, element) { element.after(error); },
  rules: {
    field: {
      required: true,
      email: true
    },
    terms: {
      required : true
    },
    messages:{
      terms: {
        required : "check the checbox"
      }
    }
  }
});

verticalForm.children("div").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  stepsOrientation: "vertical",
  onStepChanging: function (event, currentIndex, newIndex){
    verticalForm.validate().settings.ignore = ":disabled,:hidden";

    return verticalForm.valid();
  },
  onFinished: function(event, currentIndex) {
    verticalForm.submit();
  }
});
</script>

Пожалуйста, помогите мне с этой проблемой

Answer 1

Вы неправильно вложили объект messages в rules.

rules: {
    field: {
        required: true,
        email: true
    },
    terms: {
        required : true
    },
    messages:{ // <- DO NOT PLACE INSIDE OF RULES
        terms: {
            required : "check the checbox"
        }
    }
}

Объекты rules и messages являются родственными элементами ...

rules: {
    field: {
        required: true,
        email: true
    },
    terms: {
        required : true
    }
},
messages:{
    terms: {
        required : "check the checbox"
    }
}

Как примечание, ваши правила валидации крайне избыточны.

Использовать class="required" ИЛИ required="required" встроенные атрибуты ...

ИЛИ использовать terms: { required: true } внутри rules

Плагин проверки автоматически примет ОДИН из эти три метода правил.

---

В противном случае проверка вашего флажка работает нормально: jsfiddle.net / 6wzoy2x7 /