jQuery验证没有获得选项 [英] jQuery Validation not getting options

问题描述

我试图自定义我的表单验证，但没有成功。

测试时，消息或自定义错误类都不会触发。不过，它似乎工作，因为它显示无效字段后的标准错误消息。

我的代码：

HTML

 < form role =formmethod =POSTid =account-edit> 
< div class =box-body> 
< div class =form-group> 
< label for =address>地址< / label> 
< input type =textclass =form-controlid =addressname =addressplaceholder =Endereço> 
< / div> 
< div class =form-group> 
< label for =telephone>电话< / label> 
< input type =textclass =form-controlid =telephonename =telephoneplaceholder =Telefone> 
< / div> 
< div class =form-group> 
< label for =telephone>联络电子邮件< / label> 
< input type =emailclass =form-controlid =emailname =contact_emailplaceholder =E-mail> 
< / div> 
< div class =form-group> 
< label for =telephone>网站< / label> 
< input type =textclass =form-controlid =websitename =websiteplaceholder =Website> 
< / div> 
< / div> 
< div class =box-footer> 
< button type =submitclass =btn btn-primary>更新信息< / button> 
< / div> 
< / form> 
  

Javascript：

 < code $（'＃account-edit'）。validate（{
 errorClass：has-error，
 rules：{
 email：{
 email：真正的
} 
}，
消息：{
电子邮件：{
 email：'请输入一个有效的电子邮件格式：name @ domain'
} 
}，
 highlight：function（element，errorClass）{
 $（element）.closest（'。control-group'）。addClass（errorClass）; 
}，
 unhighlight：function（element，errorClass）{
 $（element）.closest（'.control-group'）。removeClass（errorClass）; 
} 
}）; 
  

CSS：

  .has-error input {
 border：1px纯红色; 
} 
  

JSFiddle与我的代码： http://jsfiddle.net/ov8zx694/1/

另外，我设法通过数据属性定制错误消息。

解决方案

规则对象只能使用名称属性构造。在你的情况下， name 是 contact_email ，而不是 email ...

 规则：{
 contact_email：{
 email：true 
} 
}，
消息：{
 contact_email：{
 email：'请输入一个有效的电子邮件格式：name @ domain'
} 
}，
  

DEMO： http://jsfiddle.net/ov8zx694/2/

---

另外，CSS不起作用，因为您没有任何包含 control-group 类的标记。

  $（元素）.closest（ '控制组。'）addClass（errorClass）。 
  

要么更改标记以使其包含此类，要么将类名更改为已存在的标记...

  $（element）.closest（'。form-group'）。addClass（errorClass）; 
  

DEMO 2： http://jsfiddle.net/ov8zx694/3/

I'm trying to customise my form validation with no success.

Nor message nor custom error class is firing when I test. Still, it seems to work, since it shows the standard error message after the invalid field.

My code:

HTML

<form role="form" method="POST" id="account-edit">
            <div class="box-body">
                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address" name="address" placeholder="Endereço">
                </div>
                <div class="form-group">
                    <label for="telephone">Telephone</label>
                    <input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telefone">
                </div>
                <div class="form-group">
                    <label for="telephone">Contact-email</label>
                    <input type="email" class="form-control" id="email" name="contact_email" placeholder="E-mail">
                </div>
                <div class="form-group">
                    <label for="telephone">Website</label>
                    <input type="text" class="form-control" id="website" name="website" placeholder="Website" >
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary">Update Info</button>
            </div>
        </form>

Javascript:

 $('#account-edit').validate({
            errorClass: "has-error",
            rules: {
                email: {
                    email: true
                }
            },
     messages: {
         email: {
             email: 'Please enter a valid email format: name@domain'
         }
     },
            highlight: function(element, errorClass) {
                $(element).closest('.control-group').addClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).closest('.control-group').removeClass(errorClass);
            }
        });

CSS:

.has-error input {
    border: 1px solid red;
}

A JSFiddle with my code: http://jsfiddle.net/ov8zx694/1/

Also, I managed to customize the error message through data-attributes.

解决方案

The rules object can only be constructed using the name attribute. In your case, the name is contact_email, not email...

rules: {
    contact_email: {
        email: true
    }
},
messages: {
    contact_email: {
        email: 'Please enter a valid email format: name@domain'
    }
},

DEMO: http://jsfiddle.net/ov8zx694/2/

---

Also, the CSS is not working because you don't have any markup that contains the control-group class.

$(element).closest('.control-group').addClass(errorClass);

Either change the markup so that it contains this class or change the class name to something that's already in your markup...

$(element).closest('.form-group').addClass(errorClass);

DEMO 2: http://jsfiddle.net/ov8zx694/3/

这篇关于jQuery验证没有获得选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！