Требуется флажок jquery, не работающий с использованием плагина проверки jquery

Я использую плагин проверки 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>

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


jquery jquery-validate jquery-steps
person Rohit    schedule 30.04.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы неправильно вложили объект 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" OR required="required" ...

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

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

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

person Sparky    schedule 30.04.2020