Semantic-ui: [Validation] Validating Radio buttons

[dwightbcoder]

It appears form validation does not include support for validating radio buttons so I have come up with a solution.

Nest your radio buttons into a field container with your default hidden input with an id you can target for validation:

<form class="ui form">
    <div class="field">
        <input type="hidden" name="confirm" id="confirm_default" value="">
        <div class="grouped fields">
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="confirm" tabindex="0" class="hidden">
                    <label>Yes</label>
                </div>
            </div>
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="confirm" tabindex="0" class="hidden">
                    <label>No</label>
                </div>
            </div>
        </div>
    </div>
</form>

Target your validation rules at the hidden input id:

validationRules = {
    confirm:
    {
        identifier : 'confirm_default',
        rules:
        [
            {
                type   : 'empty',
                prompt : 'Please confirm'
            },
            {
                type   : 'not[0]',
                prompt : 'You must confirm'
            }
        ]
    }
};

Update the hidden input of the radio set with the checked value:

$( 'form' )
    .form( validationRules, validationSettings )
    .on( 'change', '[type=radio]', function(e)
    {
        var name   = $( this ).attr( 'name' ),
            hidden = $( '[type=hidden][name='+name+']' );

        hidden.val( $(this).val() );
    });

[jlukic]

Does checked validation not work for you?

[dwightbcoder]

When using inline validation, checked causes multiple prompts on every matched input.

For a simple two choice radio selection with a default post value (hidden input) that results in three identical prompts, one for each radio and one for the hidden input.

This method, while far more cumbersome, allows a single error prompt.

[bryanlittlefield]

@jlukic I am having the same issue, 'checked' is not recognizing the group radios not being checked.

HTML:

<div class="inline field">
    <div class="ui radio checkbox">
        <input name="invoice_type" type="radio" value="down-payment">
        <label for="grand-total">Grand Total</label>
    </div>
    <div class="ui radio checkbox">
        <input name="invoice_type" type="radio" value="down-payment">
        <label for="name">Category Totals</label>
    </div>
    <div class="ui radio checkbox">
        <input name="invoice_type" type="radio" value="down-payment">
        <label for="name">Line Item Totals</label>
    </div>                
</div>

jQuery:

(function( $ ) {
    $(function() {
        //Semantic UI Form Validation Job - Create Invoice  =========================
        $('.ui.form.create-invoice-form').form(
            {   
                invoiceType: {
                    identifier  : 'invoice_type',
                    rules: [                       
                        {
                            type   : 'checked',
                            prompt : 'Specify the type of invoice that you would like to create'
                        },                          
                    ]                    
                }                                                             
            },
            {
                inline : true,
                on     : 'blur',                   
            }                   
        );
    });
})(jQuery);

[jlukic]

For anyone posting code samples please make a JSFiddle and not just copy and paste code here. Otherwise I'm manually creating test cases for every bug I'm trying to evaluate & fix.

It looks like there is a regression with #2505 as well..

This appears to be functioning correctly, albeit with peculiar formatting due to #2505 regression
http://jsfiddle.net/ebcn8xvq/

[douglasg14b]

There still seems to be some formatting issues with radio button validation when using inline errors. JSFiddle: http://jsfiddle.net/ebcn8xvq/2/

[dopeboy]

Thanks @Aproducktion! I used this technique for a group of checkboxes where atleast one needed to be checked.

[jlukic]

I see this is specifically an issue with inline: true and radio

[krisztianodor]

What's up with the fix of this problem?

[iROCKBUNNY]

Any progress?

[jameshibbard]

@dwightbcoder - thanks for the snippet.

It would be nice to be able to add an additional validation call to the change handler, then the error message will disappear, as soon as a user selects an option (otherwise it stays until the form is submitted).

.on('change', '[type=radio]', function(e) {
  const name = $(this).attr('name');
  const  hidden = $(`[type=hidden][name='${name}']`);
  hidden.val($(this).val());
  $('.ui.form').form('validate field', this.name);
});

This works for me. It relies on the field having the same name as the radio inputs.

[yehudasmilowitz]

The validation on radio buttons seems to be working for me, as long as the type is set to 'checked' in the rules

validationRules = {
    confirm:
    {
        identifier : 'confirm',
        rules:
        [
            {
                type   : 'checked',
                prompt : 'Please confirm'
            }
        ]
    }
};