如何使用formvalidation.io和jQuery验证单选按钮？

Question

我正在使用来自amazingSurge的jquery-wizard插件以及formvalidation.io插件.我的目的是在用户想要在向导中前进后进行表单验证.这对于正常输入验证和复选框验证非常有用.但是,我在验证无线电输入表格时遇到了问题.当我选择第一个单选按钮时,表单只允许我前进.当我在表单中有20个单选按钮并选择第三个时,表单验证说我没有选择任何东西!

这是我的验证码:

$('#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"));

这是我的表格:

<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>

我错过了什么吗？为什么无线电输入的表单验证不能按预期工作？

Answer 1

似乎您应该将单选按钮包装在一个form-group类中，因为您正在使用引导框架。就像这样：

$('#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>