Validate textboxes using event handler registration

Luzbel · Sep 25, 2014

I have a piece of JavaScript code that should validate that a username field is not empty or null and that a telephone field is in the correct format using event handler registration. It seems to be validating fine but if there is an error it still manages to submit.

HTML

Code:

<html>
    <head> 
        <script type = "text/javascript"  src = "js/validator.js" >
        </script>
    </head>

    <body>

        <form id = "decorForm" action = "">
            <table border = "0">
                <tr>
                    <th>Username: </th>
                    <td>
                        <input type = "text"  id = "myUserName" size = "15" maxlength = "15"/>
                    </td>
                </tr>

                <tr>
                    <th>Telephone: </th>
                    <td>
                        <input type = "text" id = "telephone" name = "telephone" size = "15" maxlength = "13"/>
                        <br />
                        (999)999-9999
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type = "submit" value = "Submit" />
                    </td>
                    <td>
                        <input type = "reset" value = "Reset" />
                    </td>
                </tr>

            </table>

        </form>

        <script type = "text/javascript"  src = "js/validatorr.js" >
        </script>

    </body>
</html>

JAVASCRIPT (validator.js)

Code:

function chkUser() {
// Verifies that the UserName field is not empty.
    var myUserName = document.getElementById("myUserName");
    if (myUserName.value == ""  || myUserName.value == null) {
        alert ("Please enter a Username!");
        return false;
    } else {
        return true;
    }
}

function chkTelephone() {
// Verifies that the Telephone field value is in the correct format.
    var tel = document.getElementById("telephone");
    var pos = tel.value.search(/^\(\d{3}\)\d{3}-\d{4}$/);
    if (pos != 0) {
        alert ("Please enter telephone number in the following format: (999)999-9999");
        return false;
    } else {
        return true;
    } 
}

function chkFields() {
// Verifes all fields and returns boolean to event handler
// The event handler function
    if (chkUser() && chkTelephone()) {
        return true;
    } else {
        return false;
    }
}

JAVASCRIPT (validatorr.js)

Code:

//Register the event handlers for validator.js
document.getElementById("decorForm").onSubmit = chkFields;

I am trying to use [link biobio.loc.edu/chu/web/Courses/ITEC315/ch5/passwd.html]this[/url] as an example.

jpadie · Sep 25, 2014

Code:

var elem = document.getElementById("decorForm");
if (elem.addEventListener) {
    elem.addEventListener("submit", function (evt) {
        if (chkFields == false) {
            evt.preventDefault();
            return false;
        }
    }, true);
} else {
    elem.attachEvent('onsubmit', function (evt) {
        if (chkFields == false) {
            evt.preventDefault();
            return false;
        }
    });
}

Luzbel · Sep 25, 2014

I am trying to keep it on DOM Level 0.

I tried that code but got

JavaScript:

Uncaught TypeError: Cannot read property 'addEventListener' of null

jpadie · Sep 25, 2014

the error suggests that elem is not defined. which means either the id is wrong in some places or that you have included the code block too early. you need to include the code block after the form or in a document.onload event.

if you want Dom Level 0 then you will need to include the calls in the tag. addEventListener is not supported and neither is onSubmit (outside of the tag) at dom level 0.

also i believe that getElementById is not supported at dom level 0. you will need to do document.forms("formname").elements("elementname") or whatever the syntax is

Luzbel · Sep 25, 2014

Sorry, I meant DOM Level 1.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Validate textboxes using event handler registration

Luzbel

IS-IT--Management

jpadie

Technical User

Luzbel

IS-IT--Management

jpadie

Technical User

Luzbel

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor