验证下拉菜单

时间:2018-02-16 20:45:12

标签: javascript validation html-select dropdown

这是我在这里的第一篇文章,所以如果我的问题有任何不清楚的地方,请不要给我点罚点数。如果是这样,我将编辑或添加必要的信息。

我有一个用于为html输入和选择创建javascript验证方法的作业,它会验证这两个字段并在输入详细信息或选择下拉选项后删除错误消息。而且,我遇到了第二部分的问题,我似乎无法找到解决方案,而且确切地说: 1)选择选项中的选项时错误消息不会消失(适用于输入)

我正在尝试一些事情,但显然我没有看到我的错误,我真的希望有人可以指出我在这里正确的方向。

以下是验证代码:

        var validations = {
        req: function(data){
            return (data != '' && data.length > 0);
        }   
    }
    $(document).ready(function(){
        function addError(fname, error){
            $('[name=' + fname + ']').after('<span class="validationError"> ' + error + '</span>');
        }
        function removeError(fname){
            $('[name=' + fname + ']').parent('div').find('.validationError').remove();
        }
        var map = {};
        for(var x in validationRules){
            var fname = validationRules[x][0];
            if(typeof fname == 'undefined') continue;
            if(typeof map[fname] == 'undefined') map[fname] = [];
            map[fname].push({
                'method' : validationRules[x][1],
                'error' : validationRules[x][2]
            });
        };
        for(var x in map){
            $('[name=' + x + ']').on('keyup', function(){           
                var fname = $(this).attr('name'),
                    validators = map[fname];
                removeError(fname);             
                for(var y in validators){
                    if(typeof validators[y] == 'function') continue;                
                    if(!validations[validators[y].method]($(this).val())) addError(fname, validators[y].error);
                }
            });
        }
        $('#send, #insert').on('click', function(ev){       
            var isOk = true;
            $('.validationError').remove();         
            for(var x in map){
                for(var y in map[x]){
                    if(typeof map[x][y] == 'function' || !$('[name=' + x + ']').is(':visible')) continue;

                    if(!validations[map[x][y].method]($('[name=' + x + ']').val())){
                        addError(x, map[x][y].error);
                        isOk = false;
                    }
                }
            };
            return isOk;
        });
    });

和html表单:

    <form action="form-handler.php" method="post" class="form-contacts">
    <div class="row col-sm-12 form-break1">
        <div class="col-sm-3 col-lg-3 form-label">Your name</p></div>
        <div class="col-sm-6 col-lg-6">
            <input class="textInput" type="text" name="Name" value="" placeholder="Name & Surname" maxlength="50" />    
        </div>
    </div>  
    <div class="row col-sm-12 form-break1">
        <div class="col-sm-3 col-lg-3 form-label">Vehicle Make </div>       
        <div class="col-sm-3 col-lg-3">
            <select name="Vehicle">
                <option value=""></option>
                <option value="Vehicle 1">Vehicle 1</option>
                <option value="Vehicle 2">Vehicle 2</option>
            </select>
        </div>
    </div>                                  
    <div class="wrapper sendButtons">
        <div class="col-sm-3 col-lg-3"><input id="send" type="submit" value="Send Request"></div>
    </div>                                          
</form>

最后,在关闭body标签之前,验证规则

<script>
    var validationRules = [
        // section 1
        ["Name","req","Please enter your full name & surname"],
        ["Vehicle","req","Select Vehicle"]
    ]   
</script>

0 个答案:

没有答案