Click here to Skip to main content
15,947,612 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have some fields (created dynamically) in a page and I am trying to each element on form submit .Bellow code is sample ,only txtAge field validate, txtName not validating .Is there any option to validate each field with bellow code?

What I have tried:

HTML
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script>
        function txtName_FormValidation() {
            document.getElementById('entryForm').onsubmit = function (e) {
                if (document.getElementById('txtName').value.length <= 0) {
                    alert(1)
                    document.getElementById('span_txtName').innerHTML = 'Please Enter Name.'
                    return false;
                };
            }
        }
        function txtAge_FormValidation() {
            document.getElementById('entryForm').onsubmit = function (e) {
                if (document.getElementById('txtAge').value.length <= 0) {
                    alert(2)
                    document.getElementById('span_txtAge').innerHTML = 'Please Enter Age.'
                    return false;
                };
            }
        }
    </script>
</head>
<body onload="txtName_FormValidation(); txtAge_FormValidation()">
    <form id="entryForm">
        <input type="text" id="txtName" />
        <span id="span_txtName"></span>
        <br />
        <input type="text" id="txtAge" />
        <span id="span_txtAge"></span>
        <br />
        <button type="submit" value="Sebmit">Submit</button>
    </form>
</body>
</html>
Posted
Updated 27-Apr-17 6:52am

1 solution

try

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script>
        function formValidation() {
            document.getElementById('entryForm').onsubmit = function (e) {
                debugger
                var span_txtName = document.getElementById('span_txtName');
                var span_txtAge = document.getElementById('span_txtAge');
                span_txtName.innerHTML = ''
                span_txtAge.innerHTML = ''

                var isValid = true;
                if (document.getElementById('txtName').value.length == 0) {
                    span_txtName.innerHTML = 'Please Enter Name.'
                    isValid = false;
                }
                if (document.getElementById('txtAge').value.length == 0) {
                    span_txtAge.innerHTML = 'Please Enter Age.'
                    isValid = false;
                };
                return isValid;
            }
        }
    </script>
</head>
<body onload="formValidation()">
    <form id="entryForm">
        <input type="text" id="txtName" />
        <span id="span_txtName"></span>
        <br />
        <input type="text" id="txtAge" />
        <span id="span_txtAge"></span>
        <br />
        <button type="submit" value="Sebmit">Submit</button>
    </form>
</body>
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900