CODEWITHSUNDEEP
jqueryhtmljsfiddle
user1881090
user1881090

Reputation: 741

validation for checking on all empty text inputs is not working

I have a jsfiddle here http://jsfiddle.net/cbyJD/76

As you can see in the fiddle there are 2 questions but in question 1 it contains multiple text inputs while question 2 only contains one text input. Now I am trying to validate any empty text inputs but the problem is that if in the first text input in question 1 I fill in a value and leave the others empty, when I click on the submit button, as that the other text input in question 1 is empty, it should display an lert stating there is an error in question 1 stating that there is an empty text input. Well it doesn't do this instead it goes straight to displaying an alert for question 2 stating that there is a blank input in that question.

So it seems like my problem is that if a question has multiple inputs, if one o those inputs are filled in, then it seems to think that it is fine and that there are no empty text input errors in that question. This is obviously incorrect as every single input in a question must be filled in, not one text input can be left blank.

How can the fiddle be updated in order to fix this problem?

Jquery validation() function is here:

  function validation() {

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

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


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


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

        });


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

    return true;
}

Below is HTML code:

<form id="Marks" action="" method="post">
<table border='1' id='markstbl'>
    <thead>
    <tr>
    <th class='questionth'>Question No.</th>
    <th class='answermarksth'>Marks per Answer</th>
    </tr>
    </thead>
    <tbody>

    <tr class="questiontd">
        <td class="questionnumtd q1_qnum" name="numQuestion" rowspan="2">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[]" type="text" onkeypress="return isNumberKey(event)" maxlength="3" />
</td>
</tr>

<tr class="questiontd">
<td class="answermarkstd">
<input class="individualMarks q1_mark"  q_group="1" name="answerMarks[]" type="text" onkeypress="return isNumberKey(event)" maxlength="3" />
</td>
</tr>

<tr class="questiontd">
        <td class="questionnumtd q2_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[]" type="text" onkeypress="return isNumberKey(event)" maxlength="3" />
</td>
</tr>    </tbody>
</table>

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

</form>

Table looks like this:

Question No.   Marks per Answer
1              (blank text input)
               (blank text input)
2              (blank text input)

Upvotes: 4

Views: 520

Answers (1)

Sathya
Sathya

Reputation: 5308

i update your fiddle.

see this

$("input[data-type='qmark']").each(function(i) {  
var questions = $(this).attr("data-qnum");
var marks = parseInt($("[class*=q" + i + "_ans_text]").text(), 10); 
var txtinput = $(this).val(); 
_qid = questions;
_msg = "You have errors on Question Number: " + _qid + "\n";

Upvotes: 1

Related Questions