如何突出验证jQuery

时间:2015-07-02 14:26:47

标签: javascript jquery

我喜欢这里的一些帮助因为我是jQuery的新手。

我在这里有这个代码:

$(document).ready(function(){
        $("#subscribe").validate({
            debug: false,
            rules: {
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                email: "*",
            },
            submitHandler: function(form) {
                $.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) {
                    $('#results').html(data);
                });
            }
        });
});

现在,我想要做的是用输入字段的高亮显示替换消息:*。因此,我没有在电子邮件输入字段后面显示消息*,而是想在我的电子邮件输入字段中添加一个类。非常感谢帮助。

1 个答案:

答案 0 :(得分:3)

如同提到的victor kCory,如果jQuery validate没有通过验证规则,则会向正在验证的元素添加.error类。它还添加了一条默认消息。如果要删除消息并突出显示输入字段,可以将消息设置为空字符串并使用CSS突出显示输入字段。这是一个例子:



$(document).ready(function() {
  $("#subscribe").validate({
    debug: false,
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: "",
    },
    submitHandler: function(form) {
      $.post('wp-content/themes/abc/process.php', $("#subscribe").serialize(), function(data) {
        $('#results').html(data);
      });
    }
  });
});

  #email.error {
    border: 2px solid red;
    background-color: yellow;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form id="subscribe">
  <input type="text" id="email" name="email">
</form>
&#13;
&#13;
&#13;