Javascript 具有字段和的表单验证

我正在努力让这个验证代码正常工作。我只希望用户能够添加到购物车时，字段的总和等于7，如果它不等于7，那么应该显示一个错误

任何帮助都会很好，因为我看不出我需要在哪里更改它

$（“#按钮车”）。在（'单击'，函数（）上{
变量$fieldsSet=$（'div.validateFields'）；
var MaxSelectionNum=“7”
var总和=0；
//循环遍历所有以名称开头的输入
//使用“选项数量”并对其值求和
$fieldsSet.find（'input[name^=“option quantity”]”）。每个（函数（）{
sum+=parseInt（$（this）.val（））| | 0；
});
//定总数
$fieldsSet.find（'.sum'）.val（sum）；
var allSumEqualCustomDesc=true；
if（所有SUMEQUALCUSTOMDESC）{
$（“div.errorQuantity”）.html（“请选择7顿饭”）.show（）；
}否则{
$（“div.errorQuantity”）.hide（）；
};
$.ajax({
url:'index.php？route=checkout/cart/add'，
键入：“post”，
数据：$（“#产品输入[类型=\'text\']，#产品输入[类型=\'number\']，#产品输入[类型=\'hidden\']，#产品输入[类型=\'radio\']：选中，#产品输入[类型=\'checkbox\']：选中，#产品选择，#产品文本区域'），
数据类型：“json”，
beforeSend:function（）{
$（“#按钮车”）。按钮（“加载”）；
},
完成：函数（）{
$（“#按钮车”）。按钮（“重置”）；
},
成功：函数（json）{
$（'.alert，.text danger'）.remove（）；
$（'.form group'）.removeClass（'has-error'）；
if（json['error']）{
if（json['error']['option']））{
对于（json['error']['option']中的i）{
变量元素=$（'#输入选项'+i.replace（'#'，'-'）；
if（element.parent（）.hasClass（'input-group'））{
（“”+json['error']['option'][i]+“”）之后的元素；
}否则{
元素之后（“”+json['error']['option'][i]+“”）；
}
}
}
如果（json['error']['recurtive']）{
$（'select[name=\'recurtive\u id\']'）。在（''+json['error']['recurtive']+''）之后；
}
//突出显示所有发现的错误
$（'.text-danger'）.parent（）.addClass（'has-error'）；
}
if（json['success']）{
$（'.breadcrumb'）。在（''+json['success']+'×；'）之后；
$（'#购物车>按钮'）.html（''+json['total']）；
$（'html，body'）。设置动画({
滚动顶部：0
}“慢”）；
$（'#cart>ul'）.load（'index.php？route=common/cart/info ul li'）；
}
}
});
}
);

这里有两种方法：

（没有添加

AJAX

代码，但我已经评论了它应该去哪里）

示例1:

$('#button-cart').on('click', function()
{
    var MaxSelectionNum = "7";
    var sum = 0;

    // Loop through all inputs with names that start
    // with "option-quantity" and sum their values
    $('input[name^="option-quantity"]').each(function()
    {
        console.log(parseInt($(this).val()));
        sum += parseInt($(this).val()) || 0;
    });

    if (sum < MaxSelectionNum)
    {
        $(".errorQuantity").html("Please select 7 meals").show();
    }
    else
    {
        $(".errorQuantity").hide();

        // AJAX SHOULD GO HERE!
    }
});

更新（在评论部分讨论）：

$('#button-cart').on('click', function()
{
    var MaxSelectionNum = "7";
    var sum = 0;

    // Loop through all inputs with names that start
    // with "option-quantity" and sum their values
    $('input[name^="option-quantity"]').each(function()
    {
        console.log(parseInt($(this).val()));
        sum += parseInt($(this).val()) || 0;
    });

    if (sum < MaxSelectionNum)
    {
        $(".errorQuantity").html("Please select 7 meals").show();
    }
    else
    {
        $(".errorQuantity").hide();

        // AJAX SHOULD GO HERE!
    }
});

---

你能给我们提供一个JSFIDLE（jsFIDLE.net）吗？或者也给我们提供你的html，这样我们就可以自己测试了？哦，对不起，这是html，但它是一个动态页面，我正在使用它。没问题，我能够从你的html中找到我需要的内容。在我下面的回答中，有两个例子是关于如何做的。嗨，非常感谢你的回答。我已经添加了代码，但它显示了错误，并没有阻止我添加到购物车中，无论选择了多少顿饭，即使它等于7顿。我想这可能是因为不止一组字段，请看这个提琴来了解我的意思@user5359040-嘿，在JSFIDLE中，您缺少下拉列表左侧的JQuery文件。试试这个-谢谢，这个def可以工作，但是字段的总和是每个div的，而不是表单中所有字段的总和。所以第一个div需要等于7，然后下一个div需要等于7@user5359040在我的答案中检查我的新JSFIDLE示例。它在“Added Error Border to input field”下面抱歉，我不认为我在上一条评论中解释得很好，我编辑了我的小提琴我试图更改代码以查找div.option中的输入框，看看这些字段加起来是否为7，但我认为我没有在正确的位置编辑它

$('#button-cart').on('click', function()
{
    var MaxSelectionNum = "7";
    // Set the sum
    var sum = 0;

    // Loop through all inputs with names that start
    // with "option-quantity" and sum their values
    $('input[name^="option-quantity"]').each(function()
    {
        console.log(parseInt($(this).val()));
        sum += parseInt($(this).val()) || 0;
    });

    $(".sum").html(sum);  

    if ($(document).find('.sum').val(sum) > MaxSelectionNum)
    {
        $(".errorQuantity").hide();

        // AJAX SHOULD GO HERE!
    }
    else
    {
        $(".errorQuantity").html("Please select 7 meals").show();
    }

});