how to validate the dynamically generated text field using javascript [duplicate]

Question

i add the 5 textfield generated dynamically using php with dynamic name.how can i validate the those field using javascript.here is the small sample code but my actual code is different if you help me to do such validation using following code i can do that there. help me....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function validate()
{
//help me to write validation code here.
}
</script>
</head>
<body>
<form method="post" action="##" name="test" onsubmit="return validate()">
<?php
$i=0;
while($i<5)
{
echo "<input type='text' name='count$i'>"
$i++;
}
echo "<input type='submit' value='ok'>";
?>
</form>
</body>
</html>

Just validate all inputs, or add a class to allinputs you want validated and validate those. — Timmetje
– Timmetje, Commented Oct 22, 2013 at 14:18
What browsers are you going to support? And are you avoiding the use of jquery on purpose? — Abe Petrillo
– Abe Petrillo, Commented Oct 22, 2013 at 14:18

Bhavik Shah · Accepted Answer · 2013-10-22 14:29:31Z

0

Add class to element. Aim of adding class to element is to catch only those elements that you have added dynamically and want to validate

while($i<5)
{
    echo "<input class='validate-it' type='text' name='count$i'>"
    $i++;
}

In JS

<script>
function validate()
{
    var elems = document.getElementsByClassName('validate-it');
    for(var i=0; i<elems.length; i++) { 
        // Validate here
        // Code here depends on the type of validation you wants
    }
}
</script>

I will surely edit the answer if you describe what type of validation you want to perform. Hope this helps...

answered Oct 22, 2013 at 14:29

Bhavik Shah

2,2911 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nillus · Accepted Answer · 2013-10-22 15:07:50Z

IMHO, classes are more appropriate to mark elements for CSS formatting purposes, rather than to give functional targets to elements in the page for scripts.

I suggest to assign an ID to the form, so you can reference it with javascript picking it with a getElementById function, then navigate through its elements and execute for each of them your validating function, say validateField(). Something roughly like this

function validateField(fieldToValidate) {
    //Here you can perform your validation against fieldToValidate.value (for text inputs)
}


var frm = document.getElementById("myForm");
for (var i=0; frm.elements[i]; i++)
{//Cycle through all input tags, of text type, inside the form
    if (
       frm.elements[i].tagName=="INPUT" 
       &&
       frm.elements[i].getAttribute("type")=="text")
       )
    {
        validateField(frm.elements[i]);
    }
}

Moreover, if you know that the dynamically-generated elements' names follow a given naming convention, like in your example (countX with X being a number) and you want to validate only the dynamically-generated input fields, kwowing they are text input fields, you can check only thoose; better would be to assign specific ID instead of names to the fields, to be sure you are not using the same name and validating something you shouldn't.

PHP side

<form method="post" action="##" id="myForm" name="test" onsubmit="return validate()">
<?php
$i=0;
while($i<5)
{
echo "<input type='text' id='txtField$i'>"
$i++;
}
?>

JS side

function validateField(fieldToValidate) {
    //Here you can perform your validation against fieldToValidate.value (for text inputs)
}


var frm = document.getElementById("myForm");
var currentField;
for (var i=0; currentField = document.getElementById("txtField"+i); i++)
{//Cycle through all txtField* starting IDs elements
    validateField(currentField);
}

Michael Besteck · Accepted Answer · 2013-10-22 15:19:31Z

You did not name the detailed type of validation (number in range? string with special content? etc.), so this is a common way-of-validating skeleton:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript">
        function validate()
        {
            var allInputsOk = true;
            var inputs = document.getElementsByTagName("input");
            for (var inpx in inputs) {
                if (inpx.substring(0, 5) == "count") {
                    // it's one of the inputs named "count..."
                    var inpIdx = inpx.substr(5);
                    var inpObj = document.getElementsByName(inpx)[0];
                    var inpVal = inpObj.value;
                    allInputsOk &= validateSingleInput(inpIdx, inpVal);
                    if(!allInputsOk) break;
                }
            }
            return allInputsOk;
        }
        /*
         * Tests the value of the input named "countX"
         * @return true if "value" is valid for input "count<index>", false else
         */
        function validateSingleInput(index, value) {
            var inputValueNumber = Number(value); // in case to test for numeric inputs
            var inputValueString = String(value); // in case to test for string inputs
            // your validation test here ... return true or false
            return true; // dummy 
        }
    </script>
</head>
<body>
    <form method="post" action="#" name="test" onsubmit="return validate()">
        <?php
        $i=0;
        while($i<5)
        {
        echo "<input type='text' name='count$i'>";
        $i++;
        }
        echo "<input type='submit' value='ok'>";
        ?>
    </form>
</body>
</html>

Collectives™ on Stack Overflow

how to validate the dynamically generated text field using javascript [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related