Skip to content

Instantly share code, notes, and snippets.

@leolll

leolll/your.html

Created Feb 1, 2021
Embed
What would you like to do?
Radio button validation + iodine.js
<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>
Iodine.addRule("requiredChoice", (value, name) => {
return document.querySelector('input[name="' + name + '"]:checked') != null;
});
Iodine.messages.requiredChoice = "Please select one of these options";
@leolll

This comment has been minimized.

Copy link
Owner Author

@leolll leolll commented Feb 1, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment