Question

我正在开发一个需要使用jQuery验证器插件进行单选单选按钮验证的项目。我做了一个完美的例子，我将它实现到实际项目中的代码中，现在即使示例完美运行，它也会变得无法正常工作。真气。除了bootstrap元素之外，此代码在示例中是相同的。

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

无线电输入组的jQuery验证器未在Bootstrap中验证

1 个答案: