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

Question

我正在使用 jquery-wizard plugin from amazingSurge together with the formvalidation.io 插件。我的意图是在用户想要在向导中前进时进行表单验证。这对于正常的输入验证和复选框验证都非常有效。但是，我在验证无线电输入表单时遇到问题。当我 select 第一个单选按钮时，该表格只允许我向前迈进。当我在表单中有 20 个单选按钮并且我 select 第三个时，表单验证显示我没有 select 任何东西！

这是我的验证码：

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

您的元素的 id 属性对于整个页面必须是唯一的。相反，三个单选按钮应该具有相同的名称，但 ID 不同。

Answer 2

似乎您应该将单选按钮包裹在 form-group class 中，因为您使用的是 bootstrap 框架。像这样：

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

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

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

html

javascript

forms

jquery

formvalidation.io