行上的jQuery验证

时间:2014-05-19 15:39:40

标签: javascript jquery

我有一个表单需要在我的页面上验证。表单如下所示: enter image description here

我正在试图找出最好的方法,以确保如果行中的一条信息被填写;然后需要填写整行。

正如您在示例中所看到的,第3行已经填写了成本,但没有标题。第4行有标题,但没有成本。我需要在这些类型的事情上抛出错误。

是否有一种简单的方法可以确保是否存在一个数据(在3个可编辑字段中的任意一个),然后整行需要数据。

感谢任何输入

2 个答案:

答案 0 :(得分:1)

您必须手动执行此操作。我不会为你编写完整的代码,但它会是这样的。

//on hove of each td
        $('#tableID tr td').hover(function(){
//loop each its sibling
           $(this).siblings().each(function(
//if any sibling is empty return false 
                 if($(this).val().trim() == '')
                 {
                   return false;
                 }
           ));
//else return true
                   return true;
        });

答案 1 :(得分:0)

可能的解决方案:

$("#mytable tr").each(function() {
    var anySet = false, allSet = true;
    $(this).find("td input").each(function() {
        var somethingInCell = $(this).val().trim() !== '';
        anySet |= somethingInCell;
        allSet &= somethingInCell;
    });
    if (anySet && !allSet) {
        // there is missing information
    }
});

更新

    $("#mytable").on("input", "input", function(){
        var anySet = false,
            $cells = $(this).closest("tr").find("td input");
        $cells.each(function() {
            var somethingInCell = $(this).val().trim() !== '';
            anySet |= somethingInCell;
        });
        $cells.removeClass("has-error");
        if (anySet) {
            $cells.each(function() {
                if ($(this).val().trim() === '') {
                    $(this).addClass("has-error");
                }
            });
        }
    });