jQuery验证选择不起作用

时间：2016-10-11 08:27:15

标签： jquery

我有以下HTML代码。

<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Sample</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
                <script src="js/validateall.js"></script>
    </head>
    <body>
        <form id="edit_role" action="" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <fieldset>
                    <legend>Úprava role</legend>
                    <select id="sel_edit_role" name="role_to_edit" onchange="changeRole()">
                        <option select="selected" value="">Zvolte roli</option>
                        <option value="admin">Administrator</option>
                        <option value="user">Uživatel</option>
                    </select><br />
                </fieldset>
            </div>
            <input class="btn btn-success" type="submit" id="edit_role_btn" name="edit_role" value="Upravit roli" />
            <div class="text-warning" id="edit_role_error" style="margin: 20px 0px 0px 120px"></div>
        </form>
    </body>
</html>

并遵循jQuery验证

$(document).ready(function(){
    // edit role validation
    $("#edit_role").validate({
        onkeyup: function(element){$(element).valid()},
        onfocusout: false,
        errorLabelContainer: "#edit_role_error",
        wraper: "li",
        rules: {
            sel_edit_role: {
                required: true
            }
        },
        messages: {
            sel_edit_role: {
                required: "Zvolte prosím roli, kterou chcete upravit"
            }
        },
        showErrors: function(errorMap, errorList) {
            var formSelector = '#' + this.currentForm.id;
            var formObject = $(formSelector);
            var validateObject = formObject.validate();
            var numberOfInvalids = validateObject.numberOfInvalids();

            if(numberOfInvalids == 0){
                $("#edit_role_btn").prop("disabled", false);
            }
            else{
                $("#edit_role_btn").prop("disabled", true);
            }
            this.defaultShowErrors();
        },

        highlight: function(element, errorClass, validClass) {
            $(element).addClass("bgerror").removeClass(validClass);
            $("#edit_role_error").addClass("error");
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass("bgerror").addClass(validClass);
            $("#edit_role_error").removeClass("error");
        }
    });
});

如果我选择第一个选项（值为空）并提交表单，则提交表单，但我认为它应该显示错误消息，因为我在我的js中需要这个选择。哪里出错？

$(document).ready(function(){
    // edit role validation
    $("#edit_role").validate({
        onkeyup: function(element){$(element).valid()},
        onfocusout: false,
        errorLabelContainer: "#edit_role_error",
        wraper: "li",
        rules: {
            sel_edit_role: {
                required: true
            }
        },
        messages: {
            sel_edit_role: {
                required: "Zvolte prosím roli, kterou chcete upravit"
            }
        },
        showErrors: function(errorMap, errorList) {
            var formSelector = '#' + this.currentForm.id;
            var formObject = $(formSelector);
            var validateObject = formObject.validate();
            var numberOfInvalids = validateObject.numberOfInvalids();

            if(numberOfInvalids == 0){
                $("#edit_role_btn").prop("disabled", false);
            }
            else{
                $("#edit_role_btn").prop("disabled", true);
            }
            this.defaultShowErrors();
        },

        highlight: function(element, errorClass, validClass) {
            $(element).addClass("bgerror").removeClass(validClass);
            $("#edit_role_error").addClass("error");
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass("bgerror").addClass(validClass);
            $("#edit_role_error").removeClass("error");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Sample</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
                <script src="js/validateall.js"></script>
    </head>
    <body>
        <form id="edit_role" action="" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <fieldset>
                    <legend>Úprava role</legend>
                    <select id="sel_edit_role" name="role_to_edit" onchange="changeRole()">
                        <option select="selected" value="">Zvolte roli</option>
                        <option value="admin">Administrator</option>
                        <option value="user">Uživatel</option>
                    </select><br />
                </fieldset>
            </div>
            <input class="btn btn-success" type="submit" id="edit_role_btn" name="edit_role" value="Upravit roli" />
            <div class="text-warning" id="edit_role_error" style="margin: 20px 0px 0px 120px"></div>
        </form>
    </body>
</html>

1 个答案:

答案 0 :(得分：1)

您应该使用element的名称而不是元素的id

＆＃13;
＆＃13; 
$(document).ready(function(){
    // edit role validation
    $("#edit_role").validate({
        onkeyup: function(element){$(element).valid()},
        onfocusout: false,
        errorLabelContainer: "#edit_role_error",
        wrapper: "li",
        rules: {
            role_to_edit: {
                required: true
            }
        },
        messages: {
            role_to_edit: {
                required: "Zvolte prosím roli, kterou chcete upravit"
            }
        },
        showErrors: function(errorMap, errorList) {
            var formSelector = '#' + this.currentForm.id;
            var formObject = $(formSelector);
            var validateObject = formObject.validate();
            var numberOfInvalids = validateObject.numberOfInvalids();

            if(numberOfInvalids == 0){
                $("#edit_role_btn").prop("disabled", false);
            }
            else{
                $("#edit_role_btn").prop("disabled", true);
            }
            this.defaultShowErrors();
        },

        highlight: function(element, errorClass, validClass) {
            $(element).addClass("bgerror").removeClass(validClass);
            $("#edit_role_error").addClass("error");
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass("bgerror").addClass(validClass);
            $("#edit_role_error").removeClass("error");
        }
    });
});
＆＃13; 
<!DOCTYPE html>
<html lang="cs">
    <head>
        <title>Sample</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
            <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
                <script src="js/validateall.js"></script>
    </head>
    <body>
        <form id="edit_role" action="" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <fieldset>
                    <legend>Úprava role</legend>
                    <select id="sel_edit_role" name="role_to_edit" onchange="changeRole()">
                        <option select="selected" value="">Zvolte roli</option>
                        <option value="admin">Administrator</option>
                        <option value="user">Uživatel</option>
                    </select><br />
                </fieldset>
            </div>
            <input class="btn btn-success" type="submit" id="edit_role_btn" name="edit_role" value="Upravit roli" />
            <div class="text-warning" id="edit_role_error" style="margin: 20px 0px 0px 120px"></div>
        </form>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题