special form validtation

[vanderbergit]

Hello DaniWeb forum users,

Thank you for reading my post.
I am trying to build a function that checks the content of the form..

My HTML website contains a dynamic number of elements (with a standard of 5 elements)
Each element contains 2 input text fields and a jqueri slider.
Lets call the text input fields A and B.
It is not required to fill all the elements.
What is required is that if A contains any value B may not me empty.

This is an element

<td>Woord</td><td><input class="woordveld" type="text" name="wordarray[]"></td><td><div class="slider"><div class="slider-range"></div><input class="amount" type="text" name="numberarray[]" size="1"></div></td>

My page contains 5 of them (in a table)
There is al add element button on the page as well this ad's an extra table.
With this element content.
On submit i want to check if for each A that contains something B is not empty.
so i can alert("") something to the user.

I already tried al lot and (g00gled a lot) and i still don't have any solution.
Can someone help me out?

Thank you

Daniel van der Berg

[AleMonteiro]

This should work, if each row in the table has the two inputs:

function validateTable(tableId) {
    $("#" + tableId).find("tr").each(function() {
        var $tr = $(this),
            $inputA = $tr.children("td").eq(0).children("input"), // Gets the first input
            $inputB = $tr.children("td").eq(2).children("input"); // Gets the second input

        if ( $.trim( $inputA.val() ) != '' && $.trim( $inputB.val() == '' ) {
            alert("Error encontered!");
        }
    });
}

[vanderbergit]

AleMenteiro thankyou for your help!
i copyd the code to my settings.js and gave an ID to my table
and i have addid a missing ")" on line 7.

<table id="tabelinhoud">

and to the form..

<form action="gegevens.php" method="POST" onsubmit="validateTable(tabelinhoud)" name="woorden">

only it does not work gegevens.php opens and no alert is popping up or what so erver
what am i doing wrong??

thankyou again

[AleMonteiro]

To use like this, you must do the following:

<form action="gegevens.php" method="POST" onsubmit="return validateTable(tabelinhoud);" name="woorden">

And the function must return true or false:

function validateTable(tableId) {
    var hasErrors = false;

    $("#" + tableId).find("tr").each(function() {
        var $tr = $(this),
            $inputA = $tr.children("td").eq(0).children("input"), // Gets the first input
            $inputB = $tr.children("td").eq(2).children("input"); // Gets the second input

        if ( $.trim( $inputA.val() ) != '' && $.trim( $inputB.val() == '' ) ) {
            hasErrors = true;
        }
    });

    if ( hasErrors ) {
        alert("Has Errors");
    }

    return ! hasErrors;
}

[vanderbergit]

AleMenteiro thanks again for your help!
The code is stil not working :(

In my index.php...

<form action="gegevens.php" method="POST" onsubmit="return validateTable(tabelinhoud);" name="woorden"> <div id="tablecontent"> <table id="tabelinhoud"> <tr> <td>Woord</td><td><input class="woordveld" type="text" name="wordarray[]"></td><td><div class="slider"><div class="slider-range"></div><input class="amount" type="text" name="numberarray[]" size="1"></div></td> </tr> <tr> <td>Woord</td><td><input class="woordveld" type="text" name="wordarray[]"></td><td><div class="slider"><div class="slider-range"></div><input class="amount" type="text" name="numberarray[]" size="1"></div></td> </tr> </table> <div id="extra"> </div> </div> <div id="toevoegen"> <img onclick="addInput()" name="add" src="img\add.png" style="width:15px; border:0px;" alt="Vorige"><a onClick="addInput()"> Extra rij</a> </div> <div id="control"> <div id="btnrechts"><input type="image" src="img\doorgaan.png" style="width:100px;" value="Submit" alt="Doorgaan"></div> <div id="btnlinks"><a href="uitleg.html" ><img src="img\vorige.png" style="width:100px; border:0px;" alt="Vorige"></div>

and in my js script

function validateTable(tableId) {
    var hasErrors = false;


$("#" + tableId).find("tr").each(function() {
    var $tr = $(this),
        $inputA = $tr.children("td").eq(0).children("input"), // Gets the first input
        $inputB = $tr.children("td").eq(2).children("input"); // Gets the second input

    if ( $.trim( $inputA.val() ) != '' && $.trim( $inputB.val() == '' ) ) {
        hasErrors = true;
    }
});

if ( hasErrors ) {
    alert("Has Errors");
}

return ! hasErrors;

}

What am i doing wrong???

Thankyou

[AleMonteiro]

Sorry, I miss-read your HTML structure at first.

Change those two lines, to get the inputs.

$inputA = $tr.find("input.woordveld"), // Gets the first input which has the 'woordveld' class
$inputB = $tr.find("input.amount"); // Gets the second input which has the 'amount' class

Another thing, I never seen a name like this 'numberarray[]'. I really don't know if it may cause problems, but I don't recommend it.