Fahid Mohammad
Fahid Mohammad

Reputation: 930

How to validate two input - jquery

i have few set of questions, each set of question contains 2 input field.

            <!--Question Set-->
            <tr class="options_row">
                <td>
                <img src="images/top_bullet.gif" alt="bullet" />
                    I will only be satisfied with a usually high standard of living                    </td>
                <td width="5%">
                    <input name="score[]" type="text" class="score num" title="1" maxlength="1" />
                </td>
            </tr>                                  
            <tr class="options_row">
                <td>
                <img src="images/top_bullet.gif" alt="bullet" />
                    I wish to have considerable influence over other people.                    </td>
                <td width="5%">
                    <input name="score[]" type="text" class="score num" title="2" maxlength="1" />
                </td>
            </tr>

Now i need to validate 2each set of inputs values

For example

->Question Set1->Input_1 + Input_2 >=3

->Question Set1->Input_1 + Input_2 <=3

I have tried using the closest function but it dint work.

var score_val = $(this).closest('.score');

Thanks.

Upvotes: 0

Views: 117

Answers (2)

Fahid Mohammad
Fahid Mohammad

Reputation: 930

After all this is what i came up with

(function($) {
$.fn.calVal = function(params) {        
    params = $.extend({value:3,message:'The combined value should not be greater than or less than 3'});
    //Get the current node
    var $t = $(this);
        //If the node out of focus
        $t.blur(function() {
            //get the current group
            var data_set = $(this).attr('data-set');
            //the actual sum
            var total = 0;
            //loop through the current node to get the group of its own
            $t.each(function(){
                //get the group of sellected node
                var cur_data_set = $(this).attr('data-set');
                //if any matching group of the current node
                if(cur_data_set==data_set)
                {
                    //total the value of each selected node group
                    total += parseFloat($(this).val());
                }
            });
            //Validate the group value and return the result
            if(total>params.value)
            {
                alert(params.message);
                 $(this).val('');
            }else if(total<params.value)
            {
                alert(params.message);
                 $(this).val('');
            }
        });         
        // allow jQuery chaining
        return this;        
   };
 })(jQuery);

The logic maybe a little crappy but its works for me ;)

Thanks Mr.AvL for showing the right path :)

Upvotes: 0

AvL
AvL

Reputation: 3093

You could add an extra data attribute to each set:

<input name="score[]" type="text" data-set="1" class="score num" title="1" maxlength="1" />

and then iterate over those:

var questionSet = {}, i = 0;
$('.score attr["data-set"]').each(function(){
    i++;
    questionSet[$(this).data('set') = {
        i: $(this).value()
    };
    i = (i > 2)? 0 : i;
});

This would return an object like:

questionSet = {
    1: {
        1: "value1",
        2: "value2"
    },
    2: {
        1: "value1",
        2: "value2"
    }
}

Now you can iterate over this object:

for(x in questionSet){
    if (x[1] + x[2] >= 3) {
        // do something...
    } else {
        // do something else...
    }
}

Upvotes: 1

Related Questions