javascript - 使用 javascript 验证多个选择组

Question

这是我的 js 小提琴链接：http: //jsfiddle.net/m4tyC/

我有多个选择标签，我想在提交时进行验证，例如

至少如果在第一组中选择了 size1 和 color1 和 Qty1 中的一个，并且如果选择了一个，我想验证其他的，同时如果选择了至少一个组，则表单可以提交，并且如果用户选择了一个第二组的选项我对第二组 size2 ， color2 ，...执行相同的验证类型

我感谢任何帮助，我在我的项目中使用 jquery

Answer 1

这是一些 JQuery 代码。您可以自己弄清楚如何提交成功表单：

$(document).ready(function(){
    $("form").submit(function(event)
    {
        var is_valid = true;// for avoiding alerting in loop
        event.preventDefault();
        $(this).find("select").each(function(){ //usually default is the first
            if(!$(this).attr("selected"))
            {
                $("#"+$(this).attr("id")).each(function()
                {
                    if($(this).find("option:first").attr("selected"))
                    {
                        is_valid = false;
                    }
                });                             
            }
        });
        if( !is_valid )
            alert("Please make sure all values are set for row!");
        });
});

​</p>

看到这个jsFiddle。也有一些错误，但你可以解决这个问题。

Answer 2

试试这个（只有当至少一行被完全选中时，表单才会提交）

$(function(){
    $('#frm_productOrder').on('submit', function(e){ 
        e.preventDefault();
        var f=$(this);    
        var invalid=false, selected=0;
        $('.selects').each(function(){
        var row=$(this);
        var items=0;
        $('select', row).each(function(){
            var t=$(this);
            var selectedIndex=t.prop("selectedIndex");
            if(selectedIndex) items++;
        });
        if(items==3) selected++;
        if(items>0 && items<3) invalid=true;
        items=0;
        });
        if(selected>0 && !invalid) f[0].submit();
        else alert('Please fill up the form correctly');       
    });
});​

演示。