Geek Answers Handbook

Check if a few functions are true, then do something

I am stuck on what I think was a simple PEBCAK error on my part. I am trying to verify that all my functions are true before I submit the form, but I can’t understand how wrong I am. The following is javascript code:

function checknewaccount(){ if(emailvalid()&& checkname() && passwordcheck()) { return true; } else{ return false; } } function emailvalid() { if(email condition) { return true; } else { return false; } } function checkname()) { if(name condition) { return true; } else { return false; } } function passwordcheck(){ if(password condition) { return true; } else { return false; } }

html below:

 <form id="newaccount" name="newaccount" method="post" onSubmit="accountcode.php"> <input type="text" id="email" onBlur="emailvalid()"/> <input type="text" id="username" onBlur="checkname()" /> <input type="password" id="password" onkeyup="passwordcheck()"/> <input type="submit" value="New" onClick="return checknewaccount()"/> </form>

When I click Create, nothing happens and I know that accountcode.php is not running because nothing happens at the end of the database and there are no error messages.

To summarize, my question is, how does checknewaccount () not work? Is this related to the way I call them?

I am new to javascript, so if I completely disable my implementation, I apologize. Thank you for help!

+6
javascript function return form-submit return-value
source share
2 answers

you have the wrong form syntax - onsubmit = js function name to call, action = url ...

 <form action="accountcode.php" id="newaccount" name="newaccount" method="post" onSubmit="return checknewaccount()"> <input type="text" id="email" onBlur="emailvalid()"/> <input type="text" id="username" onBlur="checkname()" /> <input type="password" id="password" onkeyup="passwordcheck()"/> <input type="submit" value="New"/> </form>

Fully Tested Code:

 <html> <head> <script type="text/javascript"> function checknewaccount() { return emailvalid() && checkname() && passwordcheck(); } function emailvalid() { var emailAddress = document.getElementById('email').value; return (emailAddress=='test'); } function checkname() { return true; } function passwordcheck() { return true; } </script> </head> <body> <form action="#" onsubmit="return checknewaccount();"> <input type="text" id="email" name="email"/> <input type="submit"/> </form> </body> </html>

The form in the above code will be sent only if the text field has the value test

A slightly better implementation:

 <html> <head> <script type="text/javascript"> function checknewaccount() { if(emailvalid() && checkname() && passwordcheck()) { return true; } else { document.getElementById('validation').innerHTML = 'Validation failed!'; return false; } } function emailvalid() { var emailAddress = document.getElementById('email').value; return (emailAddress=='test'); } function checkname() { return true; } function passwordcheck() { return true; } </script> </head> <body> <div id="validation"></div> <form action="#" onsubmit="return checknewaccount();"> <input type="text" id="email" name="email"/> <input type="submit"/> </form> </body> </html>

Since this at least tells the user that the form has not been submitted. It would be even better to give the user a more detailed reason why, but this is beyond the scope of this question ...

+4
source share

This part of the fine (I allowed to correct the indentation):

 function checknewaccount(){ if(emailvalid()&& checkname() && passwordcheck()) { return true; } else{ return false; } }

Although you can improve it:

 function checknewaccount(){ return emailvalid() && checkname() && passwordcheck(); }

This part is a syntax error (to put it mildly):

 function emailvalid(), checkname(), passwordcheck(){ if(condition){ return true;} else{return false;}

If this is not a real quote from your code, you will have to update your question (although I may not be here to update this answer). It doesn't make much sense to ask about the code, and then quote the pseudocode in the question. (At least the pseudocode is missing the final one. } )

The same is true for your functions in the form:

 function emailvalid() { if(email condition) { return true; } else { return false; } }

This is fine (assuming email condition is still psuedocode), but there is no need for if :

 function emailvalid() { return email condition; }

In terms of “nothing happens” make sure you have debugging tools that you can use. Chrome has Dev built-in tools, just press Ctrl + Shift + I. For Firefox you can install a great Firebug. Recent IE versions have built-in dev tools (for older versions, you can download the free version of Visual Studio, which can connect to the browser). Any of them will tell you about the syntax and other errors, let you go through your code line by line, etc., which is crucial for figuring out what is happening.

Here's a quick-dropped version of what I think you're trying to do. I would not do it this way, but I made minimal changes to make it work:

HTML:

 <form action="http://www.google.com/search" method="GET" target="_blank" onsubmit="return checknewaccount()"> <input type="text" id="email" name='q' onblur="emailvalid()"> <input type="text" id="username" onblur="checkname()" > <input type="password" id="password" onkeyup="passwordcheck()"> <input type="submit" value="New"> </form>

Notes to this:

  • As pointed out in Basiclife , your form code has problems. They are fixed above.
  • I used action="http://www.google.com/search" above, but of course it will be action="accountcode.php" for you (or at least I think it will).
  • Use onsubmit for the form submission handler, not the onclick on the submit button. You cannot cancel submitting a form with a reliable cross-browser through the onclick submit button.
  • In onsubmit make sure you use return - for example, onsubmit="return checknewaccount()" , and not onsubmit="checknewaccount()" - because we want to make sure that the event material sees the return value. We don’t care if the event material does not see the return value of our other checks ( onblur="emailvalid()" ), but if we did, we need return .
  • Only one of the fields above has a name attribute; none of you do. Only fields with name attributes are passed with forms. I used only one name for my example because I want to send only one field to Google, but for your purposes you will need the name attribute for all three fields. This short article discusses id vs. name and what they are for. You sometimes need both.
  • I put the attributes in all downstream ones, which is best (and required if you want to use XHTML).
  • However, I removed / from the ends of the inputs . This is a little off topic, but at the apparent level that you are working on, you do not want to try to use XHTML, use HTML. Using XHTML correctly is technically difficult, both in authoring configuration and in server configuration, and even then you should serve it as a soup tag for IE or it will not process it properly. XHTML has its place, but in the vast majority of cases there is no reason to use it.
  • In the above combination with the JavaScript below, there is no purpose for handlers in separate fields. However, I left them because I assume that you are doing more than just the checks below - there is another example showing that these handlers are doing something useful.

JavaScript:

 function checknewaccount() { return emailvalid() && checkname() && passwordcheck(); } function emailvalid() { var element; // Get the email element element = document.getElementById('email'); // Obviously not a real check, just do whatever your condition is return element.value.indexOf('@') > 0; } function checkname() { var element; // Get the username element element = document.getElementById('username'); // Obviously not a real check, just do whatever your condition is return element.value.length > 0; } function passwordcheck() { var element; // Get the username element element = document.getElementById('password'); // Obviously not a real check, just do whatever your condition is return element.value.length > 0; }

Live copy

Things change a bit if emailvalid , et. al., the functions are going to do something so that the user knows that the fields are invalid, for example, highlighting their labels:

HTML:

 <form action="http://www.google.com/search" method="GET" target="_blank" onsubmit="return checknewaccount()"> <label>Email: <input type="text" id="email" name='q' onblur="emailvalid()"></label> <br><label>Username: <input type="text" id="username" onblur="checkname()" ></label> <br><label>Password: <input type="password" id="password" onkeyup="passwordcheck()"/></label> <br><input type="submit" value="New"> </form>

JavaScript:

 function checknewaccount() { var result; // Because we're actually doing something in each of the // three functions below, on form validation we want to // call *all* of them, even if the first one fails, so // they each color their field accordingly. So instead // of a one-liner with && as in the previous example, // we ensure we do call each of them: result = emailvalid(); result = checkname() && result; result = passwordcheck() && result; return result; } function emailvalid() { var element, result; // Get the email element element = document.getElementById('email'); // Obviously not a real check, just do whatever your condition is result = element.value.indexOf('@') > 0; // Update our label and return the result updateLabel(element, result); return result; } function checkname() { var element, result; // Get the username element element = document.getElementById('username'); // Obviously not a real check, just do whatever your condition is result = element.value.length > 0; // Update our label and return the result updateLabel(element, result); return result; } function passwordcheck() { var element, result; // Get the username element element = document.getElementById('password'); // Obviously not a real check, just do whatever your condition is result = element.value.length > 0; // Update our label and return the result updateLabel(element, result); return result; } function updateLabel(node, valid) { while (node && node.tagName !== "LABEL") { node = node.parentNode; } if (node) { node.style.color = valid ? "" : "red"; } }

Live copy

+5
source share

More articles:


All Articles