Problems validating radio groups with Javascript

Asked

Viewed 37 times

2

I need to validate a set of radio groups so that at least one is selected by the user.

If I select nothing and click the Next button, the validation seems to work. inserir a descrição da imagem aqui

The problem is that if I then select an option and click Next, the return of the validation (if (!Fv.isValid()) {......) is returning false and I can’t get out... I put an Alert to test rsrsrs...

inserir a descrição da imagem aqui

I don’t know what I’m doing wrong... Could be some problem with the radios... Does anyone know how to help me?

//JS

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define('/pais/paisImport', ['jquery', 'Site'], factory);
    } else if (typeof exports !== "undefined") {
        factory(require('jquery'), require('Site'));
    } else {
        var mod = {
            exports: {}
        };
        factory(global.jQuery, global.Site);
        global.formsWizard = mod.exports;
    }
})(this, function (_jquery, _Site) {
    'use strict';

    var _jquery2 = babelHelpers.interopRequireDefault(_jquery);

    (0, _jquery2.default)(document).ready(function ($$$1) {
        (0, _Site.run)();
    });

    // Example Wizard Form
    // -------------------
    (function () {
        // set up formvalidation
        (0, _jquery2.default)("#formatoArquivoForm").formValidation({
            framework: 'bootstrap',
            fields: {
                rgFormaContato: {
                    validators: {
                        notEmpty: {
                            message: 'Selecione uma opção'
                        }
                    }
                }
            },
            err: {
                clazz: 'text-help'
            },
            row: {
                invalid: 'has-danger'
            }
        });                

        var wizard = (0, _jquery2.default)("#paisImportWizardForm").wizard(options).data('wizard');

        // setup validator
        // http://formvalidation.io/api/#is-valid
        wizard.get("#formatoArquivo").setValidator(function () {
            var fv = (0, _jquery2.default)("#formatoArquivoForm").data('formValidation');
            fv.validate();
            alert(fv.isValid());
            if (!fv.isValid()) {
                return false;
            }

            return true;
        });

    })();

});

//HTML

<div class="page-content container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <!-- Panel Wizard Form -->
            <div class="panel" id="paisImportWizardForm">
                <div class="panel-heading">
                    <h3 class="panel-title">Assistente de Importação</h3>
                </div>
                <div class="panel-body">
                    <!-- Steps -->
                    <div class="steps steps-sm row" data-plugin="matchHeight" data-by-row="true" role="tablist">
                        <div class="step col-lg-4 current" data-target="#formatoArquivo" role="tab">
                            <span class="step-number">1</span>
                            <div class="step-desc">
                                <span class="step-title">Formato de Arquivo</span>
                                <p>Selecione uma opção</p>
                            </div>
                        </div>
                        <div class="step col-lg-4" data-target="#importarRegistros" role="tab">
                            <span class="step-number">2</span>
                            <div class="step-desc">
                                <span class="step-title">Importar Registros</span>
                                <p>Iniciar processo de importação </p>
                            </div>
                        </div>
                        <div class="step col-lg-4" data-target="#processoFinalizado" role="tab">
                            <span class="step-number">3</span>
                            <div class="step-desc">
                                <span class="step-title">Conclusão</span>
                                <p>Processo finalizado</p>
                            </div>
                        </div>
                    </div>
                    <!-- End Steps -->
                    <!-- Wizard Content -->
                    <div class="wizard-content">
                        <div class="wizard-pane active" id="formatoArquivo" role="tabpanel">
                            <form id="formatoArquivoForm">
                                <div class="form-group">
                                    <ul class="list-group list-group-dividered list-group-full">                                        
                                        <li class="list-group-item">
                                            <input type="radio" class="icheckbox-primary" id="inputRadioCSV" name="rgFormaContato"
                                                   data-plugin="iCheck" data-radio-class="iradio_flat-blue" value="1" />
                                            <label for="inputRadioCSV">CSV - Separado por vírgulas</label>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="radio" class="icheckbox-primary" id="inputRadiosXLS" name="rgFormaContato"
                                                   data-plugin="iCheck" data-radio-class="iradio_flat-blue" value="2" />
                                            <label for="inputRadiosXLS">XLS - Microsoft Excel 97-2003</label>
                                        </li>
                                        <li class="list-group-item">
                                            <input type="radio" class="icheckbox-primary" id="inputRadiosXLSX" name="rgFormaContato"
                                                   data-plugin="iCheck" data-radio-class="iradio_flat-blue" value="3" />
                                            <label for="inputRadiosXLSX">XLSX - Microsoft Excel 2007 e versões posteriores</label>
                                        </li>                                                                         
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- End Wizard Content -->
                </div>
            </div>
            <!-- End Panel Wizard One Form -->
        </div>
    </div>
</div>
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.