Running Login Validation that is causing problems. Client side ‘onchange’ of input id=customer email is not writting to <p> for each ‘if’ statement. Any help greatly appreciated.
var dbemailstr = ['heinzstapff@hotmail.com'];
[COLOR="Olive"]// emulate database email search[/COLOR]
var newemailstr = ['gloriamarks@prodigy.net'];
[COLOR="Olive"]// emulate add to databas email addresses[/COLOR]
var email = customeremail.value;
[COLOR="Olive"]// accessed with getElementById[/COLOR]
var loginrequest = document.getElementById('loginrequest');
[COLOR="Olive"]// <p> in login container[/COLOR]
[B]var matchemailstr[/B] = function() {
var atpos = email.indexOf("@");
[COLOR="Olive"]// test email input [/COLOR]
var stoppos = email.lastIndexOf(".");
[COLOR="Olive"]// test email input[/COLOR]
if (atpos == -1 || stoppos == -1) {
[COLOR="Olive"]// test email input || or symbol forces return of 'true' ?[/COLOR]
loginrequest.innerHTML = 'Not a valid email address!';
[COLOR="Olive"]// loginrequest.innerHTML change not made?[/COLOR]
}
if (stoppos < atpos) {
[COLOR="Olive"]// test email input[/COLOR]
loginrequest.innerHTML = 'Not a valid email address!';
[COLOR="Olive"] // loginrequest.innerHTML change not made?[/COLOR]
}
if (stoppos - atpos == 1) {
[COLOR="Olive"]// test email input[/COLOR]
loginrequest.innerHTML = 'Not a valid email address!';
[COLOR="Olive"] // loginrequest.innerHTML change not made?[/COLOR]
}
if(customeremail.value == dbemailstr) {
[COLOR="Olive"]// emulate database email search[/COLOR]
customerpasswordlist.className = 'loginlist';
[COLOR="Olive"]// list and input appear?[/COLOR]
customernewpasswordlist.className = 'loginlist';
[COLOR="Olive"]// list and input appear?[/COLOR]
loginrequest.innerHTML = 'Welcome back, please enter your password or make relevant changes!';
[COLOR="Olive"]// loginrequest.innerHTML change not made?[/COLOR]
}
if(customeremail.value == newemailstr) {
[COLOR="Olive"]// emulate add to databas email addresses[/COLOR]
loginrequest.innerHTML='Welcome,You should create a password to login and register.';
[COLOR="Olive"]// loginrequest.innerHTML change not made?[/COLOR]
}
else{
loginrequest.innerHTML = 'Sorry, No Match Found, Press Continue to register!';
[COLOR="Olive"]// only loginrequest.innerHTML change made?[/COLOR]
}}
addEvent(customeremail,'change',function(){ matchemailstr(); }, true);
[COLOR="Olive"]// || or symbol return true??
// uses addEvent from Chapman@about.com[/COLOR]
Does the <p> tag have id="loginrequest"? (Remember that IDs are case sensitive.)
Does the paragraph element exist when the script executes? If the script is in the <head>, the element hasn’t been created when the loginrequest variable is assigned and it will be null.
Does the error console in Firefox or Opera display any warning or error when you load the page?
AutisticCuckoo
Thanks for the response. This is driving me :sick:
the p tag html is:
<p id="loginrequest">Please enter your email address.</p>
The only if statement returned that affects the ‘loginrequest’ is the else statement:
else{
loginrequest.innerHTML = 'Sorry, No Match Found, Press Continue to register!'; // only loginrequest.innerHTML change made?
}}
and yet the 4th if statement produces the hiden input and label but dosen’t affect the ‘loginrequest’ it remains ‘Sorry, No Match Found, Press Continue to register!’
if(customeremail.value == dbemailstr) {
// emulate database email search
customerpasswordlist.className = 'loginlist';
// list and input appear?
customernewpasswordlist.className = 'loginlist';
// list and input appear?
loginrequest.innerHTML = 'Welcome back, please enter your password or make relevant changes!';
// loginrequest.innerHTML change not made?
}
I’m dumber than a box of rocks. It’s got to be a spelling error. I’ll have to run a match on ‘loginrequest’ to see what’s up. I’m using ‘Note Pad’ to edit everything:injured:
AutisticCuckoo
No, I just copied and pasted ‘loginrequest’ through out the script and still the only thing affecting it is the else statement.
‘Please Enter Your Email Address’ becomes 'Sorry, NoMatch found…
Yes, but the problem is that you are overwriting your earlier error messages! 
If the email address doesn’t contain an ‘@’ character, you put the message ‘Not a valid email address!’ into the paragraph. Then, when you come to the last if-statement, you’ll replace that with either ‘Welcome,You should create a password to login and register.’ or ‘Sorry, No Match Found, Press Continue to register!’
You could store your messages in an array instead, and output all of the messages at the end:
var matchemailstr = function() {
var msgs = [];
var atpos = email.indexOf("@"); // test email input
var stoppos = email.lastIndexOf(".");// test email input
if (atpos == -1 || stoppos == -1) { // test email input || or symbol forces return of 'true' ?
msgs.push('Not a valid email address!'); // loginrequest.innerHTML change not made?
}
if (stoppos < atpos) { // test email input
msgs.push('Not a valid email address!'); // loginrequest.innerHTML change not made?
}
if (stoppos - atpos == 1) { // test email input
msgs.push('Not a valid email address!'); // loginrequest.innerHTML change not made?
}
if(customeremail.value == dbemailstr) { // emulate database email search
customerpasswordlist.className = 'loginlist'; // list and input appear?
customernewpasswordlist.className = 'loginlist'; // list and input appear?
msgs.push('Welcome back, please enter your password or make relevant changes!'); // loginrequest.innerHTML change not made?
}
if(customeremail.value == newemailstr) { // emulate add to databas email addresses
msgs.push('Welcome,You should create a password to login and register.'); // loginrequest.innerHTML change not made?
} else {
msgs.push('Sorry, No Match Found, Press Continue to register!'); // only loginrequest.innerHTML change made?
}
loginrequest.innerHTML = msgs.join('<br>');
}
AutisticCuckoo
Thanks for reminding me about overwriting the first “if” with every if after. This is what happens when your deslexic.:p:nono:
Correct me if I am wrong but the last “else” Statement should produce the “result” you want?
A “else if” might be better for this situation? It should produce a response for each “else if”. Planning is everything? Something like this:
var checklogin=function(){ //refrence login input onchange
[B]if[/B](login.value!==email address correct syntax){
1.'Loginrequest' <p> .innerHTML='Please enter a Valid E-mail Address';
}
[B]else if[/B](login.value == email address correct syntax){
2.'Loginrequest' <p> .innerHTML='Welcome,Create a Password to Login';
produce password input;
produce password confirm input;
}
[B]else if[/B](login.value == database email address){
3.'Loginrequest' <p> .innerHTML='Welcome Back Joe, Login or make changes';
produce password input;
produce mail me my password link;
produce change my password link;
}
[B]else[/B]{
3.'Loginrequest' <p> .innerHTML='Please Enter Your E-mail Address';
}}
addEvent(//call login onchange);
Funny thing is that the added inputs still have to be scripted:eye:
That should work, if I understand correctly what you’re trying to achieve.
AutisticCuckoo
Sorry Guy I haven’t had the chance to re-write the “else if”. The first time I tried it failed but I might have written “if else”. Thanks to your comments about over-writting the first “if” I can now approach it with a little more “Clarity”.
Suprisinglly very little response from these forums. It must be a trade secret or “Mundane” javascript exersize. It could be the key to “Javascript” success. Client-Side Form Validation?:x
Hopefully I wil get back to resolve this post in the next couple of days.:sick:
There are lots of JavaScript gurus here, but they may have been busy elsewhere. Most people need to work for a living, and helping out on SitePoint usually has a lower priority.
It can also be that they saw that the question was already being answered, and didn’t feel any need to chime in only to say ‘I agree’.
There are a few key tricks to maximising your chances of useful replies on a forum:
[list][]Use a descriptive subject line.
[]Explain clearly what you expect to happen and what is actually happening; i.e., what the problem is.
[]Be polite and make it as easy as possible for people to help you: supply all the information they may need to troubleshoot for you, but don’t inundate them with 5,000 lines of irrelevant code.
[]Mark up code sections using BB code to make them easier to read.[/list]
Your subject line was perhaps not perfect (but I’ve seen much worse!), but you did very well on the other points. Sometimes a topic just gets overlooked, though, through no fault of the person who asks the question.
AutisticCuckoo
Thanks for the Edicate reminder. It never pays to be less than “Clear” or “Disrespectfull” to the script “Gods”.
Still haven’t re-written the “else if” so when I do I might need to post it under a different Title as well as posting ‘Resolved’ on the ones I have.
Mardi-Gras or Carnival?
Dose touch on another issue of viewing the number of people who have viewed a post. I KNOW I am self involved/selfish but I’d like to see the number of people who viewed the post on the post itself. I don’t always have time to review the actual Forum posts which at present is the only means of seeing how many people viewed the specific post. Possabley in the head of each post if not the head of each thread?:x
Best regards to all concerned.
AutisticCuckoo Member Site Point Forum
Got this working fine. Sorry it took so long.
var login = document.getElementById('login');
var emailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*\\.(\\w{2}|(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum))$/;
var loginrequest = document.getElementById('loginrequest');
var dbemailstr = 'heinzstapff@hotmail.com';
function checklogin(){
if(login.value.match(dbemailstr)) {
loginrequest.innerHTML = 'Welcome back Heinz, please enter your password or make relevant changes!';
document.getElementById('passwordlist').className = 'loginlist';
document.getElementById('emailpasslist').className = 'loginlist';
document.getElementById('changepasslist').className = 'loginlist';
document.getElementById('pass2list').className = 'hide';
return false;
}
if(emailformat.test(login.value)){
loginrequest.innerHTML='Welcome,You should create a password to login and register.';
document.getElementById('passwordlist').className = 'loginlist';
document.getElementById('pass2list').className = 'loginlist';
document.getElementById('emailpasslist').className = 'hide';
document.getElementById('changepasslist').className = 'hide';
return false;
}
else {
loginrequest.innerHTML='Please Enter a Valid E-mail Address to login and register!';
document.getElementById('passwordlist').className = 'hide';
document.getElementById('emailpasslist').className = 'hide';
document.getElementById('changepasslist').className = 'hide';
document.getElementById('pass2list').className = 'hide';
return true;
}
}
addEvent(login,'change',function(){ checklogin();},false);
Congrats! Application logic can be quite an obstacle sometimes. I’m glad to see you managed to overcome it. :tup: