INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Validate textboxes using event handler registration

Validate textboxes using event handler registration

(OP)
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 this as an example.

RE: Validate textboxes using event handler registration

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

RE: Validate textboxes using event handler registration

(OP)
I am trying to keep it on DOM Level 0.

I tried that code but got

CODE --> JavaScript

Uncaught TypeError: Cannot read property 'addEventListener' of null 

RE: Validate textboxes using event handler registration

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

RE: Validate textboxes using event handler registration

(OP)
Sorry, I meant DOM Level 1.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close