SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calling multiple functions with another function and using multiple events.

    Hello friends: I have hit another brick-wall.

    I have the following two functions in an asp.net (not MVC) page: I separated the function because I needed to use each function on an onBlur event, this will simply call individual validation/function. The validation works fine with just the onBlur event but not the combination using the button.

    Example: Lets say I enter valid entries into both textboxes and click the submit button, if I go back to the textbox and re-enter a bad value, the onBlur no-longer works.

    In a nutshell the onBlur only works if I do not use the button, once I do and the functions have evaluated to true, then the onBlur will not work if I re-enter a wrong value.

    Note: I want to learn the basics of JavaScript before jumping into JQuery.

    Thanks for your help!

    Here is Function A:


    Code:
    function validateA() {
    "use strict";
    
    var element = document.forms["membership"];
    
    var userNameErrorMsg = document.getElementById("lstUserNameErrorMsg");
    var userNameTextbox = document.getElementById("txtUserName");
    var userNameErrorFlg = document.getElementById("lblUserName");
    
    
    var isLetters = /^[A-Za-z0-9]+$/;
    
    if (element.txtUserName.value.match(isLetters) && 
    element.txtUserName.value.length >= 8) {
    
    userNameErrorMsg.setAttribute("class", "default");
    userNameTextbox.className = "";
    userNameErrorFlg.className = "";
    
    return true;
    }
    else {
    
    userNameErrorMsg.setAttribute("class", "error-desc");
    userNameTextbox.className = "error-state";
    userNameErrorFlg.className = "error-flag";
    
    return false;
    }
    }
    And Function B:

    Code:
    function validateB() {
    "use strict";
    
    var element = document.forms["membership"];
    
    var passwordErrorDesc = document.getElementById("lstPasswordErrorMsg");
    var passwordTextbox = document.getElementById("txtPassword");
    var passwordErrorFlg = document.getElementById("lblPassword");
    
    
    var isNumberLetters = "^[a-zA-Z0-9]*$";
    
    if (!element.txtPassword.value.match(isNumberLetters) && 
    element.txtPassword.value.length >= 8) {
    
    passwordErrorDesc.setAttribute("class", "default");
    passwordTextbox.className = "";
    passwordErrorFlg.className = "";
    
    return true;
    }
    else {
    
    passwordErrorDesc.setAttribute("class", "error-desc");
    passwordTextbox.className = "error-state";
    passwordErrorFlg.className = "error-flag";
    
    return false;
    }
    }
    Finally the calling function:

    Code:
    function callBothFunction() {
    "use strict";
    
    var isValidFunction = validateA() && validateB();
    
    return isValidFunction;
    }
    The button onClick event:

    Code:
    <input type="submit" name="btnSubmit" value="Submit Form"
    onclick="return callBothFunction();" id="btnSubmit" tabindex="11" />

    Lastly; the OnBlur event which calls individual function:

    Code:
    <input name="txtUserName" type="text" maxlength="16" 
    id="txtUserName" tabindex="4" onblur="validateA();" />
    
    
    <input name="txtPassword" type="text" maxlength="16" 
    id="txtPassword" tabindex="5" onblur="validateB();" />

    Can I use the onclick an onBlur together?

    Thanks again!

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,401
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi Iconic_creator,

    Would it be possible to see the html/js for the whole page? Or perhaps you could paste a link where we could see it online? It would be helpful to see the whole thing in context.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lets say I enter valid entries into both textboxes and click the submit button, if I go back to the textbox and re-enter a bad value, the onBlur no-longer works
    When you submit a form (and you don't cancel the submit), then whatever page is specified in the <form>'s action attribute loads in the browser window. It sounds like whatever page is specified in your <form>'s action attribute does not set event handlers on those <input> elements.


    Note: I want to learn the basics of JavaScript before jumping into JQuery.
    Don't put event handlers 'inline', i.e. in the html. The idea is to keep the css/html separate from the javascript.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    Hi Iconic_creator,

    Would it be possible to see the html/js for the whole page? Or perhaps you could paste a link where we could see it online? It would be helpful to see the whole thing in context.
    That is the complete code: Thank you for responding. I started getting other errors on this script and so I decided to simply ditch this strategy and head for JQuery Hills.
    I'll learn as much as I can about JavaScript but after reading two chapters of JQuery Selector, I am shocked that I never took this road,

    The light has come on and thanks.

    I will come back here for help with JQuery, in the meantime, gotta hit the books.

    IC

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    When you submit a form (and you don't cancel the submit), then whatever page is specified in the <form>'s action attribute loads in the browser window. It sounds like whatever page is specified in your <form>'s action attribute does not set event handlers on those <input> elements.

    Don't put event handlers 'inline', i.e. in the html. The idea is to keep the css/html separate from the javascript.
    Thanks for the advice. I'll be back bothering you guys as I get acquainted with JQuery. This raw conventional JavaScript isn't working for me.

    Thanks again!


Bookmarks

Posting Permissions

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