Validating mandatory Select doesn't work

Question

According to the accepted answer here this is what I have to do to make required selects work with the validation.

I have created a sample on jsfiddle, but I can't get it work.

The main difference is that my default is simply empty ("").

<form id="myform">
    <select id="id_deals-0-currency" class="required" name="deals-0-currency">
    <option value="">---------</option>
    <option selected="selected" value="1">USD - $</option>
    <option value="2">EUR - €</option>
    </select>
</form>

$(function() {
    $(document).ready(function() {

        $.validator.addMethod("valueNotEquals", function(value, element, arg) {
            return arg != value;
        }, "Value must not equal arg.");


        $("#myform").validate({
            rules: {
                deals-0-currency: {
                    valueNotEquals: ""
                }
            },
            messages: {
                deals-0-currency: {
                    valueNotEquals: "Please select an item!"
                }
            }

        });
    });
})

charlietfl · Accepted Answer · 2012-12-23T14:15:13.807

2

Your code works, with exception that you need to quote deals-0-currency as an object key and your empty string default is being trumped by the required class which makes the item required in validation. An empty value will trigger the required message first always and your validation method will never get triggered with current default of ""

$("#myform").validate({           
    rules: {
        'deals-0-currency': {
            valueNotEquals: ""
        }
    },
    messages: {
        'deals-0-currency': {
            valueNotEquals: "Please select an item!"
        }
    }
});

DEMO ( with required class removed) http://jsfiddle.net/WGL4j/7/

EDIT: To validate the select when it is changed use the validator valid() method which can be called on the whole form or individual elements only:

 $('#id_deals-0-currency').change(function(){
            $(this).valid()
})

Updated demo: http://jsfiddle.net/WGL4j/8/

edited Dec 23 '12 at 14:15

answered Dec 23 '12 at 14:07

charlietfl

170,828
13
121
150

+1 This works. Many Thanks. A pity I have to take care of `change` event myself. Adds extra complexity. But I guess there is no way around it. – Houman Dec 23 '12 at 15:08
charlie, I have forked your answer and hoped to achieve it by using classes rather than field names. I almost got it, but it doesn't like the way I have defined my `messages`. I have a fiddle for you http://jsfiddle.net/houmie/8rn89/1/ Do you have any idea how to fix this? Many Thanks – Houman Dec 23 '12 at 15:30
just add rule. You have already defined the message in `addMethod`. DEMO: http://jsfiddle.net/8rn89/2/ If you want to add the message along with rule it is done in the new rule object... see syntax in docs example: http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules – charlietfl Dec 23 '12 at 15:48

scottheckel · Answer 2 · 2012-12-23T14:20:46.313

To start off... you are not writing valid JavaScript. Your name can't have dashes in it! Switch to '_' or quote the name instead and it will be valid. Remember to always run your JavaScript through a tool like JSLint or JSHint.

Another weirdness in your code is that you have a $(function(){}) handler and a $(document).ready(function(){}) handler nested inside of each other. This will not break your code but is unnecessary.

In terms of checking validation when the select value changes, you will need to manually call validation. JQuery Validation comes with the method valid to do this. Update your ready function to inclue this line.

$('id_deals-0-currency').on('change', function() { $('#myform"').valid(); });

Ok, now with the changes all in place, the final code should look like the following (entire working jsFiddle here):

<html>
<head>
<script src="/path/to/jquery-1.8.3.min.js"></script>
<script src="/path/to/jquery.validate.js"></script>
<script>
$(function() {
    $.validator.addMethod("valueNotEquals", function(value, element, arg) {
        return arg != value;
    }, "Value must not equal arg.");


    $("#myform").validate({
        rules: {
            deals_0_currency: {
                valueNotEquals: ""
            }
        },
        messages: {
            deals_0_currency: {
                valueNotEquals: "Please select an item!"
            }
        }

    });

    $('#id_deals-0-currency').on('change', function() { $('#myform').valid(); });
});
</script>
<body>
<form id="myform" method="post">
        <select id="id_deals-0-currency" class="required" name="deals_0_currency">
        <option value="">---------</option>
        <option selected="selected" value="1">USD - $</option>
        <option value="2">EUR - €</option>
        </select>
</form>
</body>
</html>

can validate an individual element or collection of elements... doesn't make sense to trigger all form errors when select changed — charlietfl, Dec 23 '12 at 14:17
sure ..demo has one element...is it likely that the whole live form is one select?? — charlietfl, Dec 23 '12 at 14:31

Validating mandatory Select doesn't work

2 Answers2