jQuery validation select doesn't work

Question

I have the following HTML code.

<!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>

and following jQuery validation

$(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");
        }
    });
});

If I choose the first options (the value is empty) and submit the form, the form is submitted, but I think that it should display the error message because I have this select required in my js. Where is a mistake?

$(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>

You are typo wraper it should be wrapper. Link: jqueryvalidation.org/validate — randytan
– randytan, Commented Oct 11, 2016 at 8:33
@randytan OK, that was the mistake, but not the one, that caused the problem I described above. :) — Michal Vlasák
– Michal Vlasák, Commented Oct 11, 2016 at 8:42

Kandarp Kalavadia · Accepted Answer · 2016-10-11 08:43:37Z

1

You should use name of element instead of id of element

$(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");
        }
    });
});

<!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>

answered Oct 11, 2016 at 8:43

Kandarp Kalavadia

4926 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michal Vlasák Over a year ago

Thank you very much. But I can't see where should I make the change. I compare your and my code and don't see the difference.

Kandarp Kalavadia Over a year ago

Instead of "sel_edit_role" , you should use "role_to_edit" in rules and messages. Compare it again.

Michal Vlasák Over a year ago

You are great! Thank you!

Collectives™ on Stack Overflow

jQuery validation select doesn't work

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related