为什么这个jQuery验证错误地工作?

时间:2016-01-06 07:32:03

标签: javascript jquery

我有两个电子邮件字段:email1& EMAIL2。我希望他们两个都是截然不同的。出于某些原因,我将email1保持为readonly,将email2保持为可编辑状态。以下是我的代码 -

我的自定义验证器如下 -

$.validator.addMethod("email_not_same", function(value, element) {
  return $('#email1').val() != $('#email2').val();
}, "Both emails should not be same");  

我的规则如下 -

 email1: {
    required: true,
    email: true,
  },
  email2: {
    email: true,
    email_not_same: true,
  },

我的HTML代码如下:

<div class="form-group col-md-12">
    <label><strong>Emails : </strong></label>
</div>
<div class="form-group col-md-6">
    <input class="form-control" name="email1" placeholder="Email 1" type="email">
</div>
<div class="form-group col-md-6">
    <input class="form-control" name="email2" placeholder="Email 2" type="email">
</div>

当我同时输入两个电子邮件地址时;它根据我的规则显示消息。但是,在我更改我的email2之后,它仍然显示错误消息。请帮忙。

3 个答案:

答案 0 :(得分:2)

您正在使用jQuery选择器作为ID(#email1和#email2),但在HTML中没有指定id属性但是“name”。 添加id属性,然后重试。

<input class="form-control" id="email1" name="email1" placeholder="Email 1" type="email">
<input class="form-control" id="email2" name="email2" placeholder="Email 2" type="email">

答案 1 :(得分:1)

您缺少电子邮件的show()属性:

id

但你在这里使用它们:

<input class="form-control" id="email1" name="email1" placeholder="Email 1" type="email" />
<input class="form-control" id="email2" name="email2" placeholder="Email 2" type="email" />

答案 2 :(得分:1)

正如其他两个答案所建议的那样,您正在寻找选择器中的Id。您可以添加Id或更改您的选择器以查找name,如下所示: -

$.validator.addMethod("email_not_same", function(value, element) {
  return $('[name="email1"]').val() != $('[name="email2"]').val();
}, "Both emails should not be same");