Jquery validation error placement (radio buttons)

Question

I'm trying to use the Jquery validation plugin to validate my form. I have error messages appearing to the right of most of my input elements, but radio buttons are giving me nothing but trouble.

If I don't give a width for the div.group class, the error message appears on the outside of the full page (since I assume the div width is 100% of the page?) Not doing anything causes the error message to appear after the first radio button instead of the 2nd. I can't hardcode a width, since i want to use it on radio groups of several widths. How can I just make it appear at the right edge of wherever the radio buttons in the Radio buttons ends?

Thanks!

var validator = $("#myForm").validate({
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
    }
});

And then

<p>
    <div class="group">
        <label>Gender</label>
        Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
        Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female"  />
    </div>

Maybe just a way to have the error message appear after the last radio button in the group? If I could get a handle to the last element, I could change the offset accordingly.

EDIT: Aha, I just used div.group{display:inline-block;}.

Patricia

Answer 1

You can also use this method to place an error for a specific field wherever you want.

errorPlacement: function(error, element) {
  if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") {
     error.insertAfter("#requestorPhoneLast");
  } else {
     error.insertAfter(element);
  }
},

Voccola

That's a block in validate function just like messages and rules. – Voccola

Answer 2

Dont even need JS errorPlacement to do it... if just place a label for the radio buttons also works like so:

<label class="label_radio" for="answer_A">
  <input id="answer_A" name="answers[question1].choiceArray" type="radio" value="A"/>Yes
</label>
<label class="label_radio" for="answer_B">
  <input id="answer_B" name="answers[question1].choiceArray" type="radio" value="B"/>No
</label>

<label for="answers[question1].choiceArray" class="error" style="display:none;">* Please pick an option above</label>

Jquery Validation plugin will automatically unhide it and display the "required" messsage.

Noumenon

this should be corrected answer. effortless and logic less. – Barrus

true junaidfarooqui, Thanks armyofda12mnkeys You saved my day – Jerad

very simple solution...Working for me :) – Trousers

Answer 3

Just use some CSS:

#myform div.group label.error {float:right;padding-left:10px;}

Scag

I guess it depends on the HTML structure because this simple solution doesn’t work in my case (Drupal 8 form with a custom theme I've made). I’ve tried to do it with only CSS (position: absolute, float, etc) but I’ve ended by using errorPlacement – Everetteeverglade

Answer 4

Try this. It places the error before the object the error is raised on. If you set the first radiobutton as required, this wil work. For consistency I chose to perform this action on all inputtypes, but you can also tweak the script a little to perform this action only when a radiogroup fails validation.

$('form').validate({
  errorPlacement:
  function(error, element){
    var id=element[0]['id'];
    $( element ).before( "<label for='"+id+"' class='error'>"+error.text()+"</label>" );
  }
});

Jhelum