在電子郵件驗證中使用jQuery更改框顏色？

Question

我有一個輸入框，用於測試框中的電子郵件是否有效。 這是腳本：

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

這將測試電子郵件。 我也有這個腳本，可以通過向表單添加另一個類來更改顏色。

$("#myform").toggleClass("othercolor");

我只是不確定在哪里放置此代碼。 抱歉，jQuery中只有newby問題。 謝謝= D

Answer 1

這是一個演示...（已更新）

看來您可能正在使用jQuery驗證插件 。 假設您是，只需在頁面加載時執行$("#myform").validate()即可初始化表單驗證（例如，通過從$(document).ready()調用它）。

$(document).ready(function(){
  $("#myform").validate();
});

如果要在焦點離開電子郵件字段時應用CSS類，則可以執行以下操作：

var validator = null;
$(document).ready(function(){
    validator = $("#myform").validate({
      rules: {
        cemail: {
          required: true,
          email: true
        }
      }
    });


    $("#cemail").blur(function() {
        if (validator.form()) {
            $("#myform").addClass("othercolor");
        }
        else {
            $("#myform").removeClass("othercolor");
        }
     });
});​

validator.form()如果表單是有效的，而假如果不是返回true。 注意，.toggleclass（）不會在這里做您想要的； 您需要根據validator.form()的返回值添加或刪除類。

Answer 2

為什么不將其添加到jQuery的成功回調中：

$("#myform").validate({
rules: {
field: {
  required: true,
  email: true
}
},

success: function(){
$(this).toggleClass('red');    
}

});