Question

I have a question about JQuery Min Max Validation looping through dynamic created input items.
In my php page i have a dynamic table who loops through the data in the DB.
Sometimes i have an table with 3 input Items (Cells) sometimes with 6 or 12 input items.
With jquery i found to validate min – max value of data, but it works only for the first input item.
How can loop throug all the input item to get the same min max validation?

Here the JQuery code:

    $(document).ready(function(){
        $("input").click(function(){

                var enteredValue = $("input:#value_one").val();
                var min=1;
                var max = 3;
                var num = parseInt(enteredValue);

                if (min > num || max < num) {
                    alert('Number ' + num + ' is not a number between ' + min + ' and ' + max);
                    return false;
                }
        });
    });

Here apart of the PHP HTML Code:

    foreach($datas as $idactivite=>$dat){
        $totalactiv=0;
        $nbdiviseur=0;
        foreach($dat as $dd){
            $totalactiv+=$dd["note"];
            $nbdiviseur++;
        }
        $mamoyactiv=$totalactiv/$nbdiviseur;
        $position=3;
        $mamoyactiv = substr($mamoyactiv, 0, $position);
        $moyenneverticale[$idactivite]=$mamoyactiv;

// Here the input Item who loops through the DB Query to get them values:       

        $htmldroit.="<td id='myguaNote' bgcolor='$bgcolor' align='center'>

        <input name='".$idactivite."_".$idagent."' id='value_one' maxlength='1' class='grand' value='".$dat[$idagent]["note"]."' ></td>";

        $totalfamille+=$dat[$idagent]["note"];
        $TabRes[$ind] += $dat[$idagent]["note"];
        $TabObj[$ind] = "&nbsp;";
        $TabResColor[$ind]=0;

        $ind++;
    }

Somebody any ideas?

THX in advance

Answer 1

I think you’re not really selecting the input field which was actually clicked.

Replace var enteredValue = $("input:#value_one").val() with

 var enteredValue = $(this).val();

The callback function from click holds a reference to the clicked DOM element in the this keyword. wrap it in $() to make it a jQuery object and finally call val() on it.

Fiddle

Edit:
To validate multiple input fields on button click I used a helper class validate. Assuming all input fields you want to validate have this class you can bind some code to submit button’s on click:

$("#submitButton").click(function(){
    $(".validate").each(validateField);
});

First all elements having the class validate will be selected and on this collection we call jQuery’s each() which takes a function handle as argument. This function (validateField in this case) should take to input arguments (index and element, see the documentation for more details – if you think of a strange for for a “for in”-loop you’re not far off.).
I moved the your validation code in this function and simply replaced $(this) by $(element)

Fiddle