javascript - Jquery 验证和 CSS

Question

我在一个页面上有多个 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 或字段集中。然后，当我从组内触发事件时，我将 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;

}