jquery checkbox required not working using jquery validate plugin

Question

I am using jquery validate plugin with jquery steps, the checkbox need to be checked in first step to continue. And the checkbox validation isn't working. here is the code

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

here is the javascript code, which I am using

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

Please help me with this fixing the issue

score 2 · Answer 1 · answered Apr 30 '20 at 17:03

You have incorrectly nested the messages object inside of rules.

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

The rules and messages objects are siblings...

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

As a side-note, your validation rules are extremely redundant.

Use class="required" OR required="required" inline attributes...

OR use terms: { required: true } inside of rules

The validation plugin will automatically accept any ONE of these three rule techniques.

Otherwise, your checkbox validation is working fine: jsfiddle.net/6wzoy2x7/

jquery checkbox required not working using jquery validate plugin

1 Answers1