0

I am using jQuery validation to validate the form. I have 3 checkboxes as of now in my form. I have to validate only one filed and I have to display only one message above the submit button. I tried using require_from_group and showErrors. I am getting the validation message but when I checked the checkbox then my message is still showing here.

I tried below code

$('#contactform').on('submit', function(event) {
  $('.anyOneValidation').each(function() {
    $(this).rules("add", {
      //required: true,
      require_from_group: [1, ".anyOneValidation"],
      messages: {
        require_from_group: "Please select any one field."
      }
    })
  });
  // prevent default submit action         
  event.preventDefault();

  // test if form is valid 
  if ($('#contactform').validate().form()) {
    console.log("validates");
  } else {
    console.log("does not validate");
  }


});
$("#contactform").validate({
  showErrors: function(errorMap, errorList) {
    $(".form-errors").html("Please select any one of the check box before you submit the form.");
  },
});
<form method="post" name="contactform" id="contactform" autocomplete="off">

  <input type="checkbox" name="checkname[1]" value="checkbox1" class="anyOneValidation"><label>box1</label>
  <input type="checkbox" name="checkname[2]" value="checkbox1" class="anyOneValidation"><label>box2</label>
  <input type="checkbox" name="checkname[3]" value="checkbox1" class="anyOneValidation"><label>box3</label>

  <div class="form-errors"></div>
  <input type="submit" name="submit" value="submit">
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>

Would you help me out in this issue?

Sparky
  • 98,165
  • 25
  • 199
  • 285
user9437856
  • 2,360
  • 2
  • 33
  • 92
  • Why would you put the `.rules()` method inside of a `submit` handler? That means the rules are not going to be applied until after submit is clicked. Would be better to get those rules attached as soon as possible and not wait until submit click. – Sparky Jun 22 '20 at 21:02
  • You would not need `require_from_group` if you give all the checkboxes the same `name`. Make a checkbox group required and that's already the default behavior. – Sparky Jun 22 '20 at 21:06
  • And `showErrors` does not automatically toggle anything. Your code is triggered and puts the requested HTML into place. If you want to remove it, you'll need to write more code for that. – Sparky Jun 22 '20 at 21:10
  • You would call the `.rules()` method right after dynamically creating the fields, not wait until submit. I cannot see how you're creating these fields. Like why use `showErrors` instead of the default error messages? I would post an answer but you don't have enough information posted to know if I'm wasting time. – Sparky Jun 22 '20 at 21:14
  • @Sparky, rules() method inside of submit because I refer this link https://stackoverflow.com/questions/11536271/validate-dynamically-added-input-fields – user9437856 Jun 22 '20 at 21:26
  • @Sparky, I am using showErrors becase I have to show only one error message. – user9437856 Jun 22 '20 at 21:26
  • As of now, I have multiple checkbox and radio button and I have to show only one message intslated of multiple and I have to select only one checkbox. – user9437856 Jun 22 '20 at 21:28
  • When using `require_from_group`, the `groups` option is used to consolidate the multiple error messages into one. However, if you make the group of checkboxes share the same `name`, then you would not need `require_from_group` and therefore would not be multiple messages. There are lots of SO questions showing proper usage. – Sparky Jun 22 '20 at 21:39
  • Also, please read tag descriptions as you choose them. The jQuery Validation Engine is a totally different plugin. – Sparky Jun 22 '20 at 23:45
  • @Sparky, Noted all the points. Let me impelement this with my code. – user9437856 Jun 23 '20 at 06:24

0 Answers0