Question

我正在使用jquery-wizard plugin from amazingSurge和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

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: