Why is the error binding to my radio button and not label?

Question

I am trying to validate Radio buttons in gsp using the Jquery validation plugin. The error is binding to the first radio button and is showing at the bottom of it.

It is creating an input group with an error and the radio button(NOT LABEL)

  <g:radio id="without" name="selectionTemplate" value="1" onchange="beforeDesignateTemplate()"/>
  <label for="withoutProducts">Layers only</label>
   <g:radio id="withProducts" name=`selectionTemplate`value="2onchange="beforeDesignateTemplate()"/>
  <label for="with">Layers,descriptions</label>

here is my jquery

 $(".formCLass").validate({
            rules: {
                "selectionTemplate": {
                    required: true
                }
            }
        })

Answer 1

Use required attribute with the field. Here is the updated code:-

 <g:radio id="without" name="selectionTemplate" value="1" onchange="beforeDesignateTemplate()" required/>
  <label for="withoutProducts">Layers only</label>
   <g:radio id="withProducts" name=`selectionTemplate`value="2onchange="beforeDesignateTemplate()"/>
  <label for="with">Layers,descriptions</label>

Also don't put name in quotes. Here is the update Script:-

 $(".formCLass").validate({
     rules: {
        selectionTemplate: {
            required: true
        }
     }
 })