jQuery validation message issue

Question

I have three input radio buttons like

<input type="radio" name="specific_parent" id="parent_one" class="radio" value="existing_parent"><label class="redio_label" for="existing_parent">Existing Parent</label>
<input type="radio" name="specific_parent" id="parent_two" class="radio" value="prospective_parent"><label class="redio_label" for="prospective_parent">Prospective Parent</label>
<input type="radio" name="specific_parent" id="parent_third" class="radio" value="other"><label class="redio_label" for="other">Other</label>

I have applied jQuery validation like this:

rules: {
   specific_parent: {
      required: true
   }
},
messages: {
  specific_parent: {
      required: 'Please select radio button'
  }
}

problem is that it display the error message after first input radio button and my layout is break.

enter image description here

where do you want to display it?

ozil
– ozil

2015-04-23 07:29:58 +00:00
Commented Apr 23, 2015 at 7:29 — ozil
– ozil, Commented Apr 23, 2015 at 7:29
And exactly what validation plugin are you using?

davidkonrad
– davidkonrad

2015-04-23 07:30:21 +00:00
Commented Apr 23, 2015 at 7:30 — davidkonrad
– davidkonrad, Commented Apr 23, 2015 at 7:30
under all three radio buttons!!

Iffi
– Iffi

2015-04-23 07:30:25 +00:00
Commented Apr 23, 2015 at 7:30 — Iffi
– Iffi, Commented Apr 23, 2015 at 7:30
Where is the code that displays the message?

Hamza Kubba
– Hamza Kubba

2015-04-23 07:31:46 +00:00
Commented Apr 23, 2015 at 7:31 — Hamza Kubba
– Hamza Kubba, Commented Apr 23, 2015 at 7:31
jQuery Validation Plugin v1.13.1 * jqueryvalidation.org

Iffi
– Iffi

2015-04-23 07:32:38 +00:00
Commented Apr 23, 2015 at 7:32 — Iffi
– Iffi, Commented Apr 23, 2015 at 7:32

Alok Pathak · Accepted Answer · 2015-04-23 07:45:20Z

1

Use errorPlacement

 errorPlacement: function (error, element) {
      error.insertBefore(element);
}

answered Apr 23, 2015 at 7:45

Alok Pathak

8751 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Iffi Over a year ago

Is there any function like insertBefore() to put the errors after element??

Alok Pathak Over a year ago

Yes there are functions error.insertBefore(element) and error.insertAfter(element);

Harmeet Singh · Accepted Answer · 2015-04-23 08:03:13Z

<div class="input-container">
<input type="radio" name="specific_parent" id="parent_one" class="radio" value="existing_parent"><label class="redio_label" for="existing_parent">Existing Parent</label>
<input type="radio" name="specific_parent" id="parent_two" class="radio" value="prospective_parent"><label class="redio_label" for="prospective_parent">Prospective Parent</label>
<input type="radio" name="specific_parent" id="parent_third" class="radio" value="other"><label class="redio_label" for="other">Other</label>
</div>
<style type="text/css">
 .input-container{position:relative;} 
</style>

you have to add css of your parent div of inputs then change the position of error message using positon absolute in css and using top,left or bottom properties you can adjust where you want to display.

Collectives™ on Stack Overflow

jQuery validation message issue

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related