Michal Vlasák Michal Vlasák - 1 month ago 9
jQuery Question

jQuery validation select doesn't work

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>




Answer

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>

Comments