2011-09-16 108 views
3

你好我使用jquery驗證插件如何使用jquery驗證插件

http://docs.jquery.com/Plugins/validation

我要打電話給一個函數驗證字段後打電話到驗證後場功能。喜歡這個。

我有一個叫城市

<input type="text" name="city" class="city" id="input_1"> 

我要打電話給另一個函數驗證這個領域

後場,這是我的代碼

var x=jq("#contactinfo").validate({ 
    rules: { 

     city: { 
      required:{ 
       depends: function(){ 
           return ((type == "Single Store & Venue") || (type == "Chain Store & Venue")|| (type == "Department Store")); 
         } 
        }, 
      minlength: 3, 
      maxlength: 50     
     }, 
    }, 

    messages: { 

     city: { 
      required: "Enter City", 
      minlength: "min length 3" 
     }, 
    } 
}); 

如果鍵入少於3個字符。它給我的錯誤

最小長度3

如果輸入任何字符它給我的錯誤

入市

我要打電話給之後的另一個功能,如change_background_color()

function change_background_color() { 

    $('.city').css('background-color','blue'); 

} 

如何做到這一點。請幫幫我,我那麼努力和失敗........感謝

UPDATE

實際的問題是,我有全局變量

var city_value = 0; 

它是增量和設置爲1在應用程序中。

我想調用一個函數,當它是1時,我想通過在city_value爲1時調用函數來刪除city輸入框的錯誤消息。

我需要這樣的

rules: { 

     city: { 
      required:true, 
      minlength: 3, 
      maxlength: 50     
     }, 
     messages: { 

     city: { 
      required: "Enter City", 
      minlength: "min length 3" 
     }, 
    } 
    }, 

我想打電話給創建此錯誤消息後一種方法的解決方案。

在我的功能我要做的就是

function remove_city_error(){ 

     if(city_value ==1){ 

     $('.city').next('.error').remove(); 
     } 

這正是我需要的。請幫助

}

回答

1

從jQuery validation.validate Documentation

見描述性的變量名:

$(".selector").validate({ 
    highlight: function(element, errorClass, validClass) { 
    $(element).addClass(errorClass).removeClass(validClass); 
    $(element.form).find("label[for=" + element.id + "]").addClass(errorClass); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
    $(element).removeClass(errorClass).addClass(validClass); 
    $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass); 
    }, 
    success: function(label) { 
    label.addClass("valid").text("Ok!") 
    } 
}); 

移植到你的情況:

$(".city").validate({ 
    /*highlight: function(element, errorClass, validClass) { 
    $(element).css("background-color", "blue"); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
    $(element).css("background-color", "");//default color 
    },*/ 
    success: remove_city_error 
}); 

編輯更新到你的情況。我將其他選項放在其他讀者的評論標籤中。

+0

案件是我想要刪除驗證生成的錯誤消息。但突出顯示作品第一,我不能刪除錯誤信息,我想創建錯誤消息後運行一個函數 –

+0

你想要什麼exactely?您是否想要替換錯誤消息的HTML元素,防止錯誤出現或其他內容?我在答案中添加了一個iink來詳細說明文檔。只需點擊「選項」標籤即可。 –

+0

@ Rob W。更新我的代碼。請檢查 –

0

您可以通過javascript更改DOM元素的CSS類來完成該操作。

Assumming你的表格有一個id #myform和你想改變的類「市.error」你可以這樣做:

document.getElementById("myform").setAttribute("class", ".city .error"); 

對於更復雜的元素結構(即一個ID和許多類)您可以通過元素表,並改變你需要這樣的:

var sec = document.getElementById("myform").getElementsByTagName("input"); 
for (var i = 0; i < sec.length; i++) { 
    cs = sec[i].getAttribute("class"); /* get current class */ 
    sec[i].setAttribute("class", cs + '.error'); /* add class to existing */ 
} 

你得到的圖片。我個人更喜歡更簡單的CSS元素結構。