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

Recommended Answers

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() ) != '' …
Jump to Post

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 …
Jump to Post

All 5 Replies

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!");
        }
    });
}

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

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;
}

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.