How to display custom validation error message using jquery validation plugin?

Question

I want to display validation error beside each checkbox group for each checkbox group. I have created span element for each and want to display error but its not showing beside checkbox for every checkbox group. instead its showing required error for each checkbox beside 1st checkbox group. How to achieve it?

In bellow image, validation message is showing beside 1st checkbox group.

Here is the Html file,

   <div class="other-complain-right">
                                    <ul>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsBppStandard">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsBppStandard">
                                            <label>No</label>
                                            <span id="ErrorIsBppStandard"></span>
                                        </li>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsKycNorm">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsKycNorm">
                                            <label>No</label>
                                            <span id="ErrorIsKycNorm"></span>
                                        </li>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
                                            <label>No</label>
                                            <span id="ErrorIsKpcsSystem"></span>
                                        </li>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
                                            <label>No</label>
                                            <span id="ErrorIsIndustryPractice"></span>
                                        </li>
                                        <li>
                                            <select>
                                                <option>Select Property</option>
                                            </select>
                                            <input type="text" name="" placeholder="Other">
                                        </li>
                                    </ul>
                                </div>

Validation function as bellow,

   $("#kycFormTab4").validate({
        errorLabelContainer: '#ErrorIsBppStandard',
        //errorLabelContainer: '#ErrorIsKycNorm',
        //errorLabelContainer: '#ErrorIsKpcsSystem',
        //errorLabelContainer: '#ErrorIsIndustryPractice',

        rules: {
            'IsBppStandard': {
                required: true,
            },
            'IsKycNorm': {
                required: true,
            },
              'IsKpcsSystem': {
                required: true,
            },
              'IsIndustryPractice': {
                  required: true,
            }
        },

        //specify validation error messages
        messages: {
            'IsBppStandard': {
                required: "You must check at least 1 box",
            },
            'IsKycNorm': {
                required: "You must check at least 1 box",
            },
            'IsKpcsSystem': {
                  required: "You must check at least 1 box",
             },
            'IsIndustryPractice': {
                  required: "You must check at least 1 box",
             }
        }

        //submitHandler: function(form){
        //    form.submit();
        //}

    });

It's because you've set the `errorLabelContainer` to the `#ErrorIsBppStandard`. Just remove that — Rory McCrossan, Sep 04 '17 at 07:28
i want to display error message in span element i have mentioned. thats why i have use ` errorLabelContainer: '#ErrorIsBppStandard'`. — alka vaghela, Sep 04 '17 at 07:31
Ah, I understand what you're trying to do now. I added an answer for you — Rory McCrossan, Sep 04 '17 at 07:39
A better solution can be found here https://stackoverflow.com/a/26500000/3708462 — Emdadul Sawon, Dec 31 '18 at 08:09

score 1 · Accepted Answer · answered Sep 04 '17 at 07:37

Your issue is because you're using errorLabelContainer, and setting it to a single element. This means that all errors will be placed in the same location.

To fix this you need to use errorPlacement instead, which can be used to return the location to place the error based on the element that caused the error, something like this:

$("#kycFormTab4").validate({
  errorPlacement: function($error, $element) {
    $error.appendTo($element.closest("li"));
  },
  rules: {
    'IsBppStandard': {
      required: true,
    },
    'IsKycNorm': {
      required: true,
    },
    'IsKpcsSystem': {
      required: true,
    },
    'IsIndustryPractice': {
      required: true,
    }
  },
  messages: {
    'IsBppStandard': {
      required: "You must check at least 1 box",
    },
    'IsKycNorm': {
      required: "You must check at least 1 box",
    },
    'IsKpcsSystem': {
      required: "You must check at least 1 box",
    },
    'IsIndustryPractice': {
      required: "You must check at least 1 box",
    }
  }
});

.error {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="kycFormTab4">
  <div class="other-complain-right">
    <ul>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsBppStandard">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsBppStandard">
        <label>No</label>
        <span id="ErrorIsBppStandard"></span>
      </li>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsKycNorm">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsKycNorm">
        <label>No</label>
        <span id="ErrorIsKycNorm"></span>
      </li>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
        <label>No</label>
        <span id="ErrorIsKpcsSystem"></span>
      </li>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
        <label>No</label>
        <span id="ErrorIsIndustryPractice"></span>
      </li>
      <li>
        <select>
          <option>Select Property</option>
        </select>
        <input type="text" name="" placeholder="Other">
      </li>
    </ul>
  </div>
  <button>Submit</button>
</form>

thank you Rory! its working! but i have one more question. what if i have another div outside `
` which contain other textbox element and i want to display validation error for that textbox element? — alka vaghela, Sep 04 '17 at 07:47
In that case you'd need to amend the logic in the `errorPlacement` function. It would be hard to tell you exactly how without seeing the code, so I'd suggest you start a new question about it if you have issues. — Rory McCrossan, Sep 04 '17 at 07:48

How to display custom validation error message using jquery validation plugin?

1 Answers1