Calling multiple functions with another function and using multiple events

JavaScript
1

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:


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:


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:

function callBothFunction() {
"use strict";

var isValidFunction = validateA() && validateB();

return isValidFunction;
}

The button onClick event:

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

Lastly; the OnBlur event which calls individual function:

<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

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

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

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

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!