Question

我正在编写表单的验证代码，除了事件没有触发表单中的两个select元素外，一切正常。它们没有什么特别之处，只有两个中的第一个选项都有值=''和选中的禁用属性。

有人能说出我的错吗？

这是JQuery：

var obj = {
    "iname" : {},
    "old_price" : {},
    "discount" : {},
    "category" : {},
    "subcategory" : {},
    "item_image" : {},
    };

$('#form').on("submit", function(){

        var formvalid = true;

        //ON SUBMIT test if input elements have empty value. NOT FIRING FOR SELECT!     
        $.each(obj, function(key){

            if($("#"+key+"").val()==''){
                $("#"+key+"").addClass('form-control');
                $("#"+key+"").parent().addClass('has-error');
                $("#"+key+"").parent().append('<span id="glyph-error" class="glyphicon glyphicon-remove form-control-feedback"></span>');
                $("#"+key+"").parent().append('<div class="error-hint-empty alert alert alert-warning"><span class="warning-glyph glyphicon glyphicon-warning-sign"></span>You must input '+$("#"+key+"").parent().find('label').text()+'!</div>');         
           formvalid = false;               
           }    
});// End of empty value test

return formvalid;
});

以下是fiddle

Answer 1

由于该选项被禁用，因此select元素值将变为null而不是''，因此请尝试

    $.each(obj, function (key) {
        var value = $("#" + key + "").val();
        if (value == '' || value == null) {

            $("#" + key + "").addClass('form-control');
            $("#" + key + "").parent().addClass('has-error');
            $("#" + key + "").parent().append('<span id="glyph-error" class="glyphicon glyphicon-remove form-control-feedback"></span>');
            $("#" + key + "").parent().append('<div class="error-hint-empty alert alert alert-warning"><span class="warning-glyph glyphicon glyphicon-warning-sign"></span>You must input ' + $("#" + key + "").parent().find('label').text() + '!</div>');
            formvalid = false;
        }

    }); // End of empty value test

演示：Fiddle

Answer 2

在提交事件中发出警报，如下所示，以检查事件是否被触发

$('#form').on("submit", function(){
    alert('submit invoked')
    var formvalid = true;
    //ON SUBMIT test if input elements have empty value. NOT FIRING FOR SELECT!     
    $.each(obj, function(key){
        if($("#"+key+"").val()==''){
            $("#"+key+"").addClass('form-control');
            $("#"+key+"").parent().addClass('has-error');
            $("#"+key+"").parent().append('<span id="glyph-error" class="glyphicon glyphicon-remove form-control-feedback"></span>');
            $("#"+key+"").parent().append('<div class="error-hint-empty alert alert alert-warning"><span class="warning-glyph glyphicon glyphicon-warning-sign"></span>You must input '+$("#"+key+"").parent().find('label').text()+'!</div>');
            formvalid = false;
        }
    });// End of empty value test
return formvalid;
});

这将帮助您确定是否导致问题的事件。

由于你没有给出整个html ..检查你是否在头标记中包含了jQuery文件。

JQuery没有为select元素触发

2 个答案: