CODEWITHSUNDEEP
jqueryhtmljquery-validate
mikkuslice
mikkuslice

Reputation: 397

JQuery <select> Validation on more than one <select> at the same time

I have this form that contains three select boxes, one for day, one for month and one for year, and have been trying for quite some time now to validate it properly.

I have a method that adds a class to the <select>'s parent so that a green dot appears at the side to show that it is valid.

Now whenever the user enters only the year or month, the class 'valid' is set to the parent even though one of the other fields is set to null.

Another issue I am encountering with the way I am doing stuff is that the Date of Birth is not required to validate the form, but if the user wishes to enter his date of birth he can do so.

So therefore what I am trying to achieve is to start validation on the <select> only when the user inputs at least one of the three <select>s, and the form would still be validated if the user enters nothing.

This is the code I came up with thus far:

jQuery.validator.addMethod('selectcheck', function (value) {
    return (value != 'null');
}, "value required");

$("#registrationform").validate({
    rules: {
        dayofbirth:{selectcheck:true,},
        monthofbirth:{selectcheck:true,},
        yearofbirth:{selectcheck:true,}
    }
    highlight: function (element) {
        $(element).parent().addClass('error').removeClass('valid').closest('.form-group').addClass('error').removeClass('valid');
    },
    unhighlight: function (element) {
        $(element).parent().addClass('valid').removeClass('error').closest('.form-group').addClass('valid').removeClass('error');
    }
});

I did not add the error messages and other stuff like that since I it is rather irrellevant to the question.

EDIT: I changed the code so that the date does not call the selectcheck method, since I am now using that method only for some other checkboxes. Now I am trying to come up with a new method that validates only the dates.

Upvotes: 0

Views: 794

Answers (1)

Sparky
Sparky

Reputation: 98718

I'm not entirely sure why you created a custom method for what the simple required rule can already do.

If your HTML looks like this, where the first option contains value=""...

<select name="month" class="date">
    <option value="">please select month...</option>
    <option value="1">January</option>
    <option value="2">February</option>
    ....
</select>

then you can use this...

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            month: {
                required: true
            }
        }
    });

});

DEMO: http://jsfiddle.net/KE9SU/

Alternatively, if you want to validate them as a group, you can use the require_from_group method included in the additional-methods.js file.

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            month: {
                require_from_group: [3, '.date']
            },
            day: {
                require_from_group: [3, '.date']
            },
            year: {
                require_from_group: [3, '.date']
            }
        },
        groups: {
            dateGroup: 'month day year'
        }
    });

});

DEMO: http://jsfiddle.net/KE9SU/1/

Now using the proper rules, it should be easier for you to automatically target and style the error elements.

Upvotes: 1

Related Questions