www.webdeveloper.com
Results 1 to 4 of 4

Thread: Validate textboxes using event handler registration

  1. #1
    Join Date
    Sep 2014
    Posts
    3

    Validate textboxes using event handler registration

    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:
    <?xml version = "1.0" encoding = "utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns = "http://www.w3.org/1999/xhtml">
        <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.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,033
    I recently had a case similar to this and it's a pretty simple fix. I will note that I'm not a fan of your event handler assignment though. I can't say assigning the event directly to the object's 'onSubmit' event is bad or wrong, however there is a bit more flexibility in using addEventListener (and attachEvent for IE). But I suppose that's a discussion for another topic.

    When assigning the event to a form, you should make use of the event object being passed into the function. I'm not sure if your method of assigning the event handler will affect this or not, but you should be able to just make a change to the chkFields() function:
    Code:
    function chkFields(e) {
    	// Verifes all fields and returns boolean to event handler
    	// The event handler function
    	if(!chkUser() || !chkTelephone()) e.preventDefault();
    }
    Essentially, the 'e' variable is being passed in automatically, being set to the event object itself. Forms require you to use 'preventDefault()' rather than returning a false or 0 value. If you are placing the function directly in the form as inline HTML, then you can keep your function as-is and just use:
    HTML Code:
    <form id="decorForm" action="" onsubmit="return chkFields()">
    This would cause the form to only submit based on the return value of your chkFields() function. But any time you use javascript to assign the event handler you must use preventDefault() on the event object.

  3. #3
    Join Date
    Jul 2011
    Posts
    30
    I suspect you are executing this code
    before the document is loaded.

    Code:
    //Register the event handlers for validator.js
    document.getElementById("decorForm").onSubmit = chkFields;
    The above code must be in an
    onload function or just before
    the </body> tag.

  4. #4
    Join Date
    Sep 2014
    Posts
    3
    Just realized it was a case sensitive problem. I wrote onSubmit instead on onsubmit.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles