The code below is supposed to validate the username and password and if correct should run "run.html" else run "fail.html",But the code is not executing as required.What is the error in the code?
<!doctype html>
<html>
<body>
<form>
<font size=5><font color="black"><input type="text" placeholder="Username" name="text1"><br /><br /></font>
<font size=5><font color="white"><input type="password" placeholder="Password" name="text2"><br /><br /></font>
<font size=5><input type="submit" value="Login" onclick=javascript.validate(test1.value,test2.value)></font>
</form>
<! javascript>
<script language="javascript">
function validate(text1,text2)
{
if(text1==workshop && text2==workshop)
load("run.html");
else
{
load("fail.html");
}
}
function load(url)
{
location href=url;
}
</script>
</body>
</html>
The code below is supposed to validate the username and password and if correct should run "run.html" else run "fail.html",But the code is not executing as required.What is the error in the code?
<!doctype html>
<html>
<body>
<form>
<font size=5><font color="black"><input type="text" placeholder="Username" name="text1"><br /><br /></font>
<font size=5><font color="white"><input type="password" placeholder="Password" name="text2"><br /><br /></font>
<font size=5><input type="submit" value="Login" onclick=javascript.validate(test1.value,test2.value)></font>
</form>
<! javascript>
<script language="javascript">
function validate(text1,text2)
{
if(text1==workshop && text2==workshop)
load("run.html");
else
{
load("fail.html");
}
}
function load(url)
{
location href=url;
}
</script>
</body>
</html>
- 1 Consider using PHP or other server side code. – NendoTaka Commented Jun 11, 2015 at 21:09
- 3 Why so many downvotes? Is a valid question. However, maybe is just testing javascript or maybe he will be doing ajax once he can run the function, so if you are not doing something constructive, better do nothing. – ecarrizo Commented Jun 11, 2015 at 21:16
4 Answers
Reset to default 9Firstly - don't validate credentials like this - do it on the server side as anything client side is practically worthless for security.
Other than that...
- Use css to change the presentation of elements rather than html elements like
font. javascript.validate(...)should bejavascript:validate(...)or justvalidate(...).- Use
<script type="text/javascript">to start a (java)script element. location hrefshould belocation.href- You need to wrap string values in quotes (i.e.
workshopshould be"workshop"). - Change
name="text1"toid="text1"and then you can get the value usingdocument.getElementById("text1").value.
<form>
<input type="text" placeholder="Username" id="text1" /><br />
<input type="password" placeholder="Password" id="text2" /><br />
<input type="button" value="Login" onclick="javascript:validate()" />
</form>
<script type="text/javascript">
function validate()
{
if( document.getElementById("text1").value == "workshop"
&& document.getElementById("text2").value == "workshop" )
{
alert( "validation succeeded" );
location.href="run.html";
}
else
{
alert( "validation failed" );
location.href="fail.html";
}
}
</script>Since you are new on web development, i have decided to post this answer, that you would get useful advises. But first, I am curious if you are using a tutorial. If you are using a tutorial, please look for an another one since your HTML contains "ancient" tags.
This post contains of three parts: HTML, CSS, then JavaScript.
About HTML
Let's start with the HTML first. Here is an example of what you have written:
<font size=5>
<font color="black">
<input type="text" placeholder="Username" name="text1">
<br /><br />
</font>
When you want to use a tag, you can open it by <tagname>. But some tags require that you have to close it. You can close a tag with </tagname>
This example is a bad example
<div>
// other inner HTML tags
This is a good example:
<div>
// other inner HTML tags.
</div>
You can see that i have added </div> to close the div-element. The modern browsers is able to "solve" it for you, when parsing the HTML through the DOM, but it is best to do it yourself.
However, there are tags which contains multiple attributes. Like the input element.
<input type="text" placeholder="Username" name="text1" />
Please notice the added / at the end of the tag. I also recommend to use convenient name for the input field. If you expect it to be used for user name, please call it by "username". Here is an improved example:
<input type="text" placeholder="Username" name="username" id="username" />
If you want to read more about HTML, please read this documentation about HTML. Try to avoid old (not used anymore) tags like <font> or even <! javascript>. Where did you have dug this one?
About CSS
You have used <font> in your HTML. As said in the previous section, it is not used anymore. To style the HTML, we are using CSS now. That stands for "Cascading Style Sheets" which allows you to style a plain HTML document in a nice looking webpage. If you want to read more about css, you can use this documentation.
In css, if you want to style the font, you can use for example
input[type="text"] {
color: red;
}
This CSS part says "search for input[type="text"] elements". Then color the text-color as red. This is a simple example. By using CSS, you can manipulate the look of your webpage.
If you want to learn more about CSS, please use the given documentation, or use this tutorial.
About JavaScript
What you have entered is good, but you still need to check for the basics. Let's look to your first function: validate.
function validate(text1,text2)
{
if(text1==workshop && text2==workshop)
load("run.html");
else
{
load("fail.html");
}
}
Your condition part is text1==workshop && text2==workshop. The variables text1 and text2 is known (passed by the function as argument). But what about workshop ? Did you have defined it somewhere ? If not, then this code would fail, because the script will look for a variable workshop that doesn't exist.
I suppose that you want to search by string name:
text1=="workshop"
Which is a valid condition check. The script will see if text1 matches the given string.
Now, about coding style. You are firstly not using { and } at the first if, but you are using that at your else. Try to handle one coding style. Either you are using { and } at both or not even one.
For example, with { and }:
if(text1=="workshop" && text2=="workshop") {
load("run.html");
}
else {
load("fail.html");
}
Or without
if(text1==workshop && text2==workshop)
load("run.html");
else
load("fail.html");
Both are better readable then what you have entered. If your condition block is multi-line, you have to use { and } of course.
if( condition ) {
// line 1
// line 2
}
This means that line1 and line2 will be executed if the condition is true.
Now, the function usage. You have used
function load(url)
{
location href=url;
}
This function doesn't work. It will give you a runtime error. location.href is what you need. If you want to use native JavaScript functions, ensure that you have named it correctly.
Back to your question. You want to check the entered data when you have clicked the button. This is possible by using "events". You have used onclick in the button tag
<input type="submit" value="Login" onclick="validate()" />
Don't worry, this will work. (i'm only not a fan of this style). If you click on the button, it will run the "validate()" function. There is no need to add "javascript" before it. The DOM can handle it. The function name and its argument must be same as the entered string in the onclick attribute. If you don't do this, the script will search for a non existing function, thus leading to an error.
Since we are using validate without arguments, we have to redefine the function as below.
function validate()
{
if(text1=="workshop" && text2=="workshop")
// code omitted
}
Please recall that text1 is a variable and has to be defined. Since these aren't passed by methods argument, you have to select the input tags, to ensure that you can obtain the data required. This can be done by document.getElementById() function, which selects an element by its id.
var text1 = document.getElementById("username");
This says "get the element by its id: username". Please check the HTML section of the example. You can find out that the input element has an id="username" attribute.
But we are not there yet ! The function document.getElementById gives you a node of the element with the given ID.
Since the element is an input field, you can use the .value property to obtain its current value. Do the same for text2 (the password field, then you have a working function !
function validate()
{
var text1 = document.getElementById("username");
var text2 = document.getElementById("password");
if(text1.value=="workshop" && text2.value=="workshop") {
load("run.html");
}
else {
load("fail.html");
}
}
There are other ways to select your tags in the document: getElementByClassName, querySelector, querySelectorAll and more. Please check for its documentation of how it works.
That's all what you need to ensure that your code works. If you want to know more about javascript, please read this documentation. Or start learning the basics by using this tutorial.
Please don't copy paste my answer directly. Try to learn more about web developing. It's an amazing world and it can help yourself more.
But, still a side note: you are validating data on client side. I would not recommend that because it is not security safe. Usually the form should be submitted to a server, which then validates the form. If the entered data is valid, the server will redirect the user to the right page. This can be done with PHP, ASP.NET, ...
full example
function validate() {
var text1 = document.getElementById("username");
var text2 = document.getElementById("password");
if (text1.value == "workshop" && text2.value == "workshop") {
load("run.html");
} else {
load("fail.html");
}
}
function load(url) {
location.href = url;
}input[type="text"] {
color: red;
}<form>
<input type="text" placeholder="Username" name="username" id="username" />
<br />
<br />
<input type="password" placeholder="Password" name="password" id="password" />
<br />
<br />
<input type="submit" value="Login" onclick="validate()" />
</form>There are (quite) a few errors in the code:
onclick=javascript.validate(test1.value,test2.value) should be onclick="javascript:validate(test1.value,test2.value)" (i.e. there should be a colon instead of a period).
test1 and test2 do not exist.
if(text1==workshop && text2==workshop) should be if(text1=="workshop" && text2=="workshop")
location href=url; should be location.href=url;
At the end of the day, however, even if you get this working this "security" will be trivial to get around; anyone can just view the source of the page and see the username and password.
<form>
<input type="text" placeholder="Username" id="text1" /><br />
<input type="password" placeholder="Password" id="text2" /><br />
<input type="button" value="Login" onclick="javascript:validate()" />
</form>
<script type="text/javascript">
function validate()
{
if( document.getElementById("text1").value == "workshop"
&& document.getElementById("text2").value == "workshop" )
{
alert( "validation succeeded" );
location.href="run.html";
}
else
{
alert( "validation failed" );
location.href="fail.html";
}
}
</script>