jquery form validation

Question

I am using the following code for my form validation. The code is working fine. Here is the code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function(){
        jQuery("#type").validate({
            expression: "if (VAL != '0') return true; else return false;",
            message: "Please make a selection"
        });

        jQuery("#type2").validate({
            expression: "if (VAL != '0')   return true; else return false;",
            message: "Please make a selection"
        });
    });
</script>

Code for drop down boxes:

<select name="type" id="type">
    <option value="0">Select an option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<select name="type2" id="type2">
    <option value="0">Selet an option</option>
    <option value="0">Select an option</option>
    <option value="'1">Option 1</option>
    <option value="'2">Option 2</option>
    <option value="'3">Option 3</option>
</select>

Now what i want is the validation on second dropdown box should work only when the selected item in first dropdown box is "option 2" and for other selected options there will be no validation on second combo box.

jquery.validate.js:

(function (jQuery) {
    var ValidationErrors = new Array();
    jQuery.fn.validate = function (options) {
        options = jQuery.extend({
            expression: "return true;",
            message: "",
            error_class: "ValidationErrors",
            error_field_class: "ErrorField",
            live: true
        }, options);
        var SelfID = jQuery(this).attr("id");
        var unix_time = new Date();
        unix_time = parseInt(unix_time.getTime() / 1000);
        if (!jQuery(this).parents('form:first').attr("id")) {
            jQuery(this).parents('form:first').attr("id", "Form_" + unix_time);
        }
        var FormID = jQuery(this).parents('form:first').attr("id");
        if (!((typeof (ValidationErrors[FormID]) == 'object') && (ValidationErrors[FormID] instanceof Array))) {
            ValidationErrors[FormID] = new Array();
        }
        if (options['live']) {
            if (jQuery(this).find('input').length > 0) {
                jQuery(this).find('input').bind('blur', function () {
                    if (validate_field("#" + SelfID, options)) {
                        if (options.callback_success)
                            options.callback_success(this);
                    }
                    else {
                        if (options.callback_failure)
                            options.callback_failure(this);
                    }
                });
                jQuery(this).find('input').bind('focus keypress click', function () {
                    jQuery("#" + SelfID).next('.' + options['error_class']).remove();
                    jQuery("#" + SelfID).removeClass(options['error_field_class']);
                });
            }
            else {
                jQuery(this).bind('blur', function () {
                    validate_field(this);
                });
                jQuery(this).bind('focus keypress', function () {
                    jQuery(this).next('.' + options['error_class']).fadeOut("fast", function () {
                        jQuery(this).remove();
                    });
                    jQuery(this).removeClass(options['error_field_class']);
                });
            }
        }
        jQuery(this).parents("form").submit(function () {
            if (validate_field('#' + SelfID))
                return true;
            else
                return false;
        });
        function validate_field(id) {
            var self = jQuery(id).attr("id");
            var expression = 'function Validate(){' + options['expression'].replace(/VAL/g, 'jQuery(\'#' + self + '\').val()') + '} Validate()';
            var validation_state = eval(expression);
            if (!validation_state) {
                if (jQuery(id).next('.' + options['error_class']).length == 0) {
                    jQuery(id).after('<span class="' + options['error_class'] + '">' + options['message'] + '</span>');


                    jQuery(id).addClass(options['error_field_class']);
                }
                if (ValidationErrors[FormID].join("|").search(id) == -1)
                    ValidationErrors[FormID].push(id);
                return false;
            }
            else {
                for (var i = 0; i < ValidationErrors[FormID].length; i++) {
                    if (ValidationErrors[FormID][i] == id)
                        ValidationErrors[FormID].splice(i, 1);
                }
                return true;
            }
        }
    };
    jQuery.fn.validated = function (callback) {
        jQuery(this).each(function () {
            if (this.tagName == "FORM") {
                jQuery(this).submit(function () {
                    if (ValidationErrors[jQuery(this).attr("id")].length == 0)
                        callback();
                    return false;
                });
            }
        });
    };
})(jQuery);

Any ideas?

score 0 · Answer 1 · answered Mar 21 '12 at 14:08

0

you have to add a custom function based on the selected value of select option

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();

http://api.jquery.com/val/

answered Mar 21 '12 at 14:08

zod

12,092
24
70
106

thanx guys for your help, i tried to understand but i am new to jquery so there is a problem in understanding. it will be very helpful if you can explain what exactly i can do here to solve my problem... – sumitmann Mar 23 '12 at 07:05

score 0 · Answer 2 · edited May 23 '17 at 10:08

0

You can create a custom rule for this. In this custom rule you have to check whether the value of second dropdown is option2. If it is then show the message else show an empty message.

You can check custom rule creation in the SO post jQuery Validate Plugin - How to create a simple custom rule?

edited May 23 '17 at 10:08

Community

1
1

answered Mar 22 '12 at 05:17

Mahesh KP

6,248
13
50
71

thanx guys for your help, i tried to understand but i am new to jquery so there is a problem in understanding. it will be very helpful if you can explain what exactly i can do here to solve my problem... – sumitmann Mar 23 '12 at 07:04

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

i am trying the suggestion given in this post

Custom jQuery Validation .addMethod question

hope this will work for me

edited May 23 '17 at 12:11

Community

1
1

answered Mar 23 '12 at 08:58

sumitmann

393
1
3
14

score 0 · Accepted Answer · answered Mar 23 '12 at 10:54

Finally i found the simple solutions for my problem.

here it is:

jQuery("#type2").validate({
expression: "if ((jQuery('#type1').val() == '2') && VAL == '0')   return false; else return true;",
            message: "Please make a selection"
        });

jquery form validation

4 Answers4