Radio button validation + iodine.js

your.html

<label for="password">Plan</label>
<input name="plan" type="radio" id="pro" value="pro" x-bind:class="{'invalid':plan.errorMessage}" data-rules='["requiredChoice:plan"]' data-server-errors='[]'>
<input name="plan" type="radio" id="basic" value="basic" x-bind:class="{'invalid':plan.errorMessage}" data-rules='["requiredChoice:plan"]' data-server-errors='[]'>
<p class="error-message" x-show.transition.in="plan.errorMessage" x-text="plan.errorMessage"></p>

your.js

Iodine.addRule("requiredChoice", (value, name) => {
 return document.querySelector('input[name="' + name + '"]:checked') != null;
});
Iodine.messages.requiredChoice = "Please select one of these options";

If you're following this tutorial and need to validate radio inputs, you'll want to create a custom rule in Iodine that passes an additional param. That parameter should match the radio button name, which is the same for each radio input in the group.

This should work for checkboxes too right?

It's been a while since I worked on this so I'm not sure whether or not it'll work for checkboxes. I only needed radio buttons at the time.