Form validation : inputs with type = radio are missing from onFailure callback field parameter
Form validation : inputs with type = radio are missing from onFailure callback field parameter
by Bob Marley
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.css">
<form class="ui form">
<div class="field">
<label>Empty</label>
<input name="empty" type="text">
</div>
<div class="field">
<label>Dropdown</label>
<select class="ui dropdown" name="dropdown">
<option value="">Select</option>
<option value="male">Choice 1</option>
<option value="female">Choice 2</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="checkbox" type="checkbox">
<label>Checkbox</label>
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input name="radio" type="radio">
<label>Radio</label>
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
<p style="color:red;">The radio field is validated, but is not included in onFailure field parameter values.</p>
<div class="output"></div>
</form>
JavaScript
$('.ui.form')
.form({
on: 'blur',
onFailure: function(formErrors, fields){
$('.output').html(JSON.stringify(fields));
return false;
},
fields: {
empty: {
identifier : 'empty',
rules: [
{
type : 'empty',
prompt : 'Please enter a value'
}
]
},
dropdown: {
identifier : 'dropdown',
rules: [
{
type : 'empty',
prompt : 'Please select a dropdown value'
}
]
},
checkbox: {
identifier : 'checkbox',
rules: [
{
type : 'checked',
prompt : 'Please check the checkbox'
}
]
},
radio: {
identifier : 'radio',
rules: [
{
type : 'checked',
prompt : 'Please check the radio'
}
]
}
}
})
;