jQuery驗證和CSS

Question

我在頁面上有多個DIV，其中包含表單字段。其中一些是必填字段，而某些不是。當用戶通過輸入數據從一個div跳到另一個div時，我必須驗證是否滿足必填字段並更改其CSS完成的DIV。如果未滿足必填字段，則不應更改css效果。我想使用Jquery進行此處理。因此，有人可以提供一種良好且簡潔的設計來進行處理。

謝謝

Answer 1

您可以使用jQuery驗證程序插件來驗證您的內容。

一旦div失去重點，您就可以檢查驗證是否通過，如果沒有通過驗證，則不要應用CSS或應用CSS。

樣例代碼：

$("#divid").validate({
    onfocusout: false,    //once div looses focus validate
    rules: {
        //your rules go here
    }
});

Answer 2

看一下jquery validate插件

Answer 3

使用jQuery驗證，您可以創建自己的方法來驗證一組控件，我使用這種方法將元素包裝在具有類名“ validationGroup”的div或fieldset中。 然后，當我從組內觸發事件時，我將DOM導航到具有類名稱的父元素，並驗證其下的所有內容。 使用這種方法，您可以控制/限制對正在編輯的當前div中控件的驗證。

函數ValidateAndSubmit（evt）{var isValid = true;

// Get Validator & Settings
var validator = $("#aspnetForm").validate();
var settings = validator.settings;

// Find the parent control that contains the elements to be validated
var $group = $(evt.currentTarget).parents('.validationGroup');

// Grab all the input elements (minus items listed below)
$group
    .find(":input")
    .not(":submit, :reset, :image, [disabled]")
    .not(settings.ignore)
    .each(function (i, item)
    {
        // Don't validate items without rules
        if (!validator.objectLength($(item).rules()))
            return true;

        if (!$(item).valid())
            isValid = false;
    });

// If any control is the group fails, prevent default actions (aka: Submit)
if (!isValid) {
    evt.preventDefault();
}

return isValid;

}