Jquery Form Validation Plugin Message Placement Problems!

Javascript & Ajax
#1

I’m using the jQuery Validation Plugin. Working great, but I’ve got an issue with radio buttons.
I’ve got side by side buttons in a table row like (It’s an older layout and I’ve not had time to kill all the layout tables everywhere yet … don’t judge!):

<td >
   <input name="guestAGE" type="radio" id="guestAGE" value="y" /> On &nbsp;&nbsp; 
   <input name="guestAGE" type="radio" id="guestAGE" value="n" /> Off &nbsp;&nbsp; 
  </td>

I need the error message to come up AFTER the last button and “Off”.
So far, I can get the message to displace the buttons on the left, can get it to appear BETWEEN the buttons … but that’s not what I want.

Trying to use error Placement like below puts it BETWEEN the last button and “OFF”

errorPlacement: function(error, element) {
   if (element.attr('type') === 'radio') {
      error.insertAfter(
          element.siblings('input[type="radio"][name="' + element.attr('name') + '"]:last'));
   }
   else {
      error.insertAfter(element);
   }
}

Pulling by hair out. How can I get it like (consider 0 represents a radio button below:

0 YES 0 NO STUPID ERROR MESSAGE GOES HERE AFTER EVERYTHING

ACK! Thanks in advance …

#2

Well, you don’t validate radio buttons.

You set one checked when the page is loaded and there is no checking as the user can only check one or the other. The value is set by you in the input form and can not be changed. No need to check for validation on radio buttons.

Unless I am missing something.

If you still need help with this, which plugin are you using?

#3

Actually - a client requested this on an admin form - “People are just submitting the form and not bothering to see what’s checked by default, so I know they’re not reading the questions”!

So, he requested NOTHING checked by default for roughly 10 questions on the form, and then force them to check one answer or another.

Finally got it working. Took a tiny bit of extra markup. Had to enclose the buttons and “On” and “Off” inside a span, then set jQuery to display the message inside another span:

  <td align="left" bgcolor="#E9EBF3" class="ckrow">
   <span class="rgroup">
    <input name="guestAGE" type="radio" id="guestAGE" value="y" /> On 
    <input name="guestAGE" type="radio" id="guestAGE" value="n" /> Off
   </span><span class="errMsg"></span>
  </td>

Then the rest looks like:

 $( "#addRSVP" ).validate({
   errorElement: 'span',
   errorClass: 'errMsg',

    rules: {
      guestAGE: { required: true }
    },
	
    messages: {
      guestAGE: { required: "Turn Guest Age ON or OFF" }
	},
	
errorPlacement: function(error, element) {
   if (element.attr('type') === 'radio') {
      error.insertAfter(element.parents("span"));
   }
   else {
      error.insertAfter(element);
   }
}

 });
#4

Okay, I see how someone might want to validate them now.
With your posted code, I did not understand why.

So, looks like this works good enough this way. A lot of programmers use
JS to validate entries and I am sure someone else will use your routine.

Good for you! Glad you solved it. I will mark this thread solved…

Sponsor our Newsletter | Privacy Policy | Terms of Service