javascript - 验证插件未采用 Bootstrap 3.0 类 has-success 成功

Question

我正在使用Validation Plugin 。并且运行良好。在这里我想在成功和错误时添加 Class has-success & has-error 。但它正在增加类(Class)。验证成功后会打印ok。并且它仅验证第一个字段。如果我填写您的姓名字段并将电子邮件地址保留为空，那么它也会提交表单...

 <form action="" method="" id="contact">
        <div class="form-group"">
            <label> Your Name </label>
            <input type="text" class="form-control" placeholder="Enter Your Name" id="firstname" required="" minlength="5"/>
        </div>

        <div class="form-group">
            <label> Your E-mail </label>
            <input type="email" class="form-control" placeholder="Enter Your Email" id="email"/>
        </div>
  <button type="submit" class="btn btn-primary btn-lg"> Send</button>
 </form>

 <script type="text/javascript"> 
   $('#contact').validate({
   success: function(label){
   label.addClass("has-success").text("ok");
 }
 });

Answer 1

"I am using Validation Plugin and it's working fine. Here I want to addClass has-success & has-error on success and error."

默认情况下，当出现错误时，插件会添加一个名为 .error 的类，并在错误清除时将该类更改为 .valid。

您可以简单地使用默认的 .error 和 .valid 类，也可以使用 errorClass 和 validClass< 替换它们 插件选项:

$('#contact').validate({
    errorClass: 'has-error',
    validClass: 'has-success'
});

您也可以添加多个类，尽管不确定为什么需要这样做:

$('#contact').validate({
    errorClass: 'error has-error',
    validClass: 'valid has-success'
});

参见文档:http://jqueryvalidation.org/validate/

<小时/>

"it's validating only first field. If I field [sic] your name field and I keep email address blank then also it's submiting form"

因为您在第二个字段上没有“要求”填写它的规则。您还需要将 required 属性添加到此字段。

此外，在您的第一个字段中，required="" 不是普遍接受的语法。

这种格式是最好的，IMO:required="required"