You can use pattern for validation.
<input type="password" id="pass" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
You can learn more here
However, if you ever wanted to use some javascript, then HTML5 does enable some validation, even pattern matching, but I'm pretty sure you'd need some javascript to have this working and also compare the two values with confirm password field as well.
You can try this
<input id="password" name="password" type="password" pattern="^\S{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 8 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>
<input id="password_two" name="password_two" type="password" pattern="^\S{8,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>
Answer from Namwanza Ronald on Stack OverflowVideos
Firstly - 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>