Question

我在页面上有多个DIV，其中包含表单字段。其中一些是必需的，有些则不是。当用户通过输入数据从一个div跳转到另一个div时，我必须验证所需的字段是否满足并更改完成DIV的CSS。如果不满足必填字段，我不应该改变css效果。我想用Jquery来处理它。所以，有人可以提供一个好的和干净的设计来接近。

由于

Answer 1

您可以使用jQuery validator 用于验证内容的插件。

一旦你的div失去焦点，你可以检查验证是否已经过，如果没有，那么不要应用css或者应用css。

示例代码：

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

Answer 2

查看jquery validate plugin

Answer 3

使用jQuery验证，您可以创建自己的方法来验证一组控件，我使用这种方法将元素包装在div或fieldset中，类名为“validationGroup”。然后，当我从组内触发事件时，我将DOM导航到具有类名的父元素并验证其下的所有内容。使用此方法，您可以控制/限制对正在编辑的当前div中的控件的验证。

function 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;

}

Jquery验证和CSS

3 个答案: