Question

I’m using the following HTML code to display a table:

<form id="Marks" action="/u0877654/Mobile/individualmarks.php" method="post">   

<table border='1' id='markstbl'>
<thead>
<tr>
<th class='questionth'>Question No.</th>
<th class='answermarksth'>Marks per Answer</th>
<th class='noofmarksth'>Marks Remaining</th>
</tr>
</thead>
<tbody>

<tr class="questiontd">
<td class="questionnumtd q<?php echo$questionId?>_qnum" name="numQuestion" rowspan="1">1 <input type="hidden" name="q1_ans_org" class="q1_ans_org" value="5"><input type="hidden" name="q1_ans" class="q1_ans" value="5"></td>
<td class="answermarkstd">
<input class="individualMarks q1_mark"  q_group="1" name="answerMarks[]" class="individualtext" type="text" onkeypress="return isNumberKey(event)" maxlength="3" />
</td>
<td class="noofmarkstd q1_ans_text"  q_group="1" rowspan="1"><strong>5</strong></td>
</tr>

<tr class="questiontd">
<td class="questionnumtd q<?php echo$questionId?>_qnum" name="numQuestion" rowspan="1">2 <input type="hidden" name="q2_ans_org" class="q2_ans_org" value="5"><input type="hidden" name="q2_ans" class="q2_ans" value="5"></td>
<td class="answermarkstd">
<input class="individualMarks q2_mark"  q_group="1" name="answerMarks[]" class="individualtext" type="text" onkeypress="return isNumberKey(event)" maxlength="3" />
</td>
<td class="noofmarkstd q2_ans_text"  q_group="1" rowspan="1"><strong>5</strong></td>
</tr>
</tbody>
</table>

<p><input id="submitBtn" name="submitMarks" type="submit" value="Submit Marks" /></p>

</form>

Below is what the table looks like:

Question No.     Marks Per Answer          Marks Remaining
    1            (value=5 text input)         0
    2            (blank text input)           5

Now I have created validations for the table above using jquery. If a row contains any number except for 0 (either higher or lower) then it will display an alert stating:

Higher than 0:

You have errors on Question Number: 
Your Total Marks Remaining does not equal 0 

• You Have NaN Marks Remaining

Less than 0:

You have errors on Question Number: 
Your Total Marks Remaining does not equal 0 

• You Need To Remove NaN Marks

Another validation is that if the user has left a text input blank under “Marks Per Answer” column theni it should display this message below:

You have errors on Question Number: 

• You have not entered in a value for all the Indivdiaul Marks textbox

I have two problems though as you can see. First of all it does not display the number for which question number contains the error, it should display question number for the first question which contains an error.

The other problem is that it keeps displaying NaN. It should display how many marks need to be removed to make it 0 or added to make it 0.

How can the two problems above be fixed?

This is my jQuery code:

function validation() {

    var alertValidation = "";
    var _qid = "";
    var _msg = "";

    $("[class*='q']").each(function (i) {
        var questions = parseInt($("[class*=q" + i + "_qnum]").text());
        var marks = parseInt($("[class*=q" + i + "_ans_text]").text());
        var txtinput = $("[class*=q" + i + "_mark]").val();
        _qid = questions;
        _msg = "You have errors on Question Number: " + _qid + "\n";


        if (txtinput == '' || txtinput == null) {
            alertValidation += "\n\u2022 You have not entered in a value for all the Indivdiaul Marks textbox\n";
        } else if (marks < '0') {

            alertValidation = "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Need To Remove " + Math.abs(marks) + " Marks";
        } else if (marks > '0') {

            alertValidation = "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Have " + marks + " Marks Remaining";
        }

        if (alertValidation != "") {
            return false; //Stop the each loop 
        }

    });


    if (alertValidation != "") {
        alert(_msg + alertValidation);
        return false;
    }

    return true;
}

Answer 1

You’re comparing Strings when you do $("[class*=q" + i + "_mark]").text() < '0', so try the != (Not Equal) operator versus the < (Less Than). Example:

 $("[class*='q'").each(function (i) {
            var marks = parseInt($("[class*=q" + i + "_mark]").text());
            _qid = $(".q" + i + "_ans_org").text();
            _msg = "You have errors on Question Number: " + _qid + "\n";


            if (!this.value) {
                alertValidation += "\n\u2022 You have not entered in a value for all the Indivdiaul Marks textbox\n";
            }

            if ($("[class*=q" + i + "_mark]").text() != '0') {
                alertValidation = "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Need To Remove " + Math.abs(marks) + " Marks";
            } else {
                alertValidation = "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Have " + marks + " Marks Remaining";
            }

            if (alertValidation != "") {
                return false; //Stop the each loop 
            }    
        });

Otherwise use your variable:

 $("[class*='q'").each(function (i) {
            var marks = parseInt($("[class*=q" + i + "_mark]").text());
            _qid = $(".q" + i + "_ans_org").text();
            _msg = "You have errors on Question Number: " + _qid + "\n";


            if (!this.value) {
                alertValidation += "\n\u2022 You have not entered in a value for all the Indivdiaul Marks textbox\n";
            }

            if (marks < 0) {
                alertValidation = "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Need To Remove " + Math.abs(marks) + " Marks";
            } else if (marks > 0) {
                alertValidation = "Your Total Marks Remaining does not equal 0 \n\n\u2022 You Have " + marks + " Marks Remaining";
            }

            if (alertValidation != "") {
                return false; //Stop the each loop 
            }    
        });