How do I validate radio buttons using formvalidation.io and jQuery?

Question

I am using the jquery-wizard plugin from amazingSurge together with the formvalidation.io plugin. My intention is to do a form validation once the user wants to step forward in the wizard. This works great for normal input validation and also for checkbox validation. However, I have problems validating a radio input form. The form only allows me to step forward when I select the first radio button. When I have 20 radio buttons in the form and I select the third one, the form validation says I did not select anything!

Here is my validation code:

$('#employeeForm').formValidation({
    framework: 'bootstrap',
    fields: {
        employeeInput: {
            validators: {
                notEmpty: {
                    message: 'Please choose an employee'
                }
            }
        }
    }
});

wizard = $("#exampleWizardForm").wizard(options).data("wizard");

wizard.get("#employees").setValidator(function() {
    var fv = $("#employeeForm").data("formValidation");
    return fv.validate(), fv.isValid() ? !0 : !1
});

// add validation after form was dynamically created
$('#employeeForm').formValidation('addField', $("#employeeInput"));

Here is my form:

<form id="employeeForm" novalidate="novalidate" class="fv-form fv-form-bootstrap">
<div class="table-responsive">
    <table class="table table-hover text-right">
        <tbody id="employee_items">
            <tr>
                <td class="text-center">
                    <label><input type="radio" value="196" name="employeeInput" id="employeeInput" kl_vkbd_parsed="true"></label>
                </td>
                <td class="text-left">Employee 1</td>
                <td>Software Tester</td>
            </tr>
            <tr>
                <td class="text-center">
                    <label><input type="radio" value="200" name="employeeInput" id="employeeInput" kl_vkbd_parsed="true"></label>
                </td>
                <td class="text-left">Employee 2</td>
                <td>Software Engineer</td>
            </tr>
            <tr>
                <td class="text-center">
                    <label><input type="radio" value="201" name="employeeInput" id="employeeInput" kl_vkbd_parsed="true"></label>
                </td>
                <td class="text-left">Employee 3</td>
                <td>CEO</td>
            </tr>
        </tbody>
    </table>
</div>

Am I missing something? Why does the form validation for radio inputs not work as desired?

Answer 1

Seems like you should wrap your radio buttons inside a form-group class since you are using bootstrap framework. Like so:

$('#employeeForm').formValidation({
  framework: 'bootstrap',
  icon: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
    employeeInput: {
      validators: {
        notEmpty: {
          message: 'Please choose an employee'
        }
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<form id="employeeForm" novalidate="novalidate" class="fv-form fv-form-bootstrap">
  <div class="table-responsive">
    <table class="table table-hover text-right">
      <tbody id="employee_items" class="form-group">
        <tr>
          <td class="text-center">
            <label>
              <input type="radio" value="196" name="employeeInput" id="employeeInput" kl_vkbd_parsed="true">
            </label>
          </td>
          <td class="text-left">Employee 1</td>
          <td>Software Tester</td>
        </tr>
        <tr>
          <td class="text-center">
            <label>
              <input type="radio" value="200" name="employeeInput" id="employeeInput" kl_vkbd_parsed="true">
            </label>
          </td>
          <td class="text-left">Employee 2</td>
          <td>Software Engineer</td>
        </tr>
        <tr>
          <td class="text-center">
            <label>
              <input type="radio" value="201" name="employeeInput" id="employeeInput" kl_vkbd_parsed="true">
            </label>
          </td>
          <td class="text-left">Employee 3</td>
          <td>CEO</td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 2

The id attribute of your elements must be unique for the entire page. Instead, the three radio buttons should have the same name, but different id's.