radio 输入组的 jQuery 验证器未在 Bootstrap 中验证

Question

我正在开发一个项目，需要使用 jQuery 验证器插件进行单选单选按钮验证。我制作了一个完美运行的示例，并将其实现到实际项目的代码中，但现在它完全拒绝工作，即使该示例运行完美。有点令人气愤。除了 Bootstrap 元素之外，此代码与示例中的代码相同。

JSFiddle在这里:http://jsfiddle.net/3vwWL/

<form action="" id="contact-form" class="form-horizontal">
   <form action="" id="registration-form">
      <div class="col-md-6">
         <div class = "form-group">
            <label class = "control-label">Must choose one</label>
            <br />
            <input name="radio" type="radio" data-validation="required" value="1" />A
            <input name="radio" type="radio" value="1" />B 
            <input name="radio" type="radio" value="1" >C 
            <input name="radio" type="radio" value="1" />D
         </div>
      </div>
   </form>
</form>

JS:

$.validate({
    form: "#contact-form, registration-form",
    modules: 'location, date, security, file',
    onModulesLoaded: function () {
        $('#country').suggestCountry();
    },
    onError: function () {
        alert("You've missed something");
    },
    onSuccess: function () {
        alert("All clear!");
        return false;
    }
});

$('input')
    .on('beforeValidation', function () {
    console.log('About to validate input "' + this.name + '"');
}).on('validation', function (evt, isValid) {
    var validationResult = '';
    if (isValid === null) {
        validationResult = 'not validated';
    } else if (isValid) {
        validationResult = 'VALID';
    } else {
        validationResult = 'INVALID';
    }
    console.log('Input ' + this.name + ' is ' + validationResult);
});

// Restrict presentation length
$('#presentation').restrictLength($('#pres-max-length'));

所有其他表单验证都有效，但这个不行。

Answer 1

您html是错误的，您应该使用单个表单，其他表单内的表单将不起作用，

试试这个，

<form action="" id="contact-form" class="form-horizontal">
    <div class="col-md-6">
      <div class = "form-group">
         <label class = "control-label">Must choose one</label>
         <br />
         <input name="radio" type="radio" data-validation="required" value="1" />A        
         <input name="radio" type="radio" value="1" />B  
         <input name="radio" type="radio" value="1" />C
         <input name="radio" type="radio" value="1" />D
      </div>
    </div>
</form>

现在仅验证#contact-form。