Web Analytics Made Easy -
StatCounter How to add alert messages to HTML and or Javascript for incorrect login. - CodingForum

Announcement

Collapse
No announcement yet.

How to add alert messages to HTML and or Javascript for incorrect login.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to add alert messages to HTML and or Javascript for incorrect login.

    Hello,

    I am new to this form and to HTML/CSS/Javascript in general. I just simply want to add either to the html code or Javascript that when the login
    information is incorrect then it prompts an alert that it is invalid. I also want to add that when nothing is input into either the user name or password field it alerts the user that they need to fill in both fields. Ive searched online for some hints but they do not seem to work. Any help would be appreciated.

    Thanks!


    <code starts here>

    <html>
    <head>
    <title>FCS Home</title>

    <div id="nav">
    <li><a href="C:\Users\1211551\Desktop\Websites\FCS\home.html">Home</a></li>
    <li><a href="C:\Users\1211551\Desktop\Websites\FCS\help.html">Help</a></li>
    </div>
    </head>

    <link rel="stylesheet" href="home.css">
    <body>

    <!- This is for the image logo ->
    <div id="mainlogo">
    <img src="C:\Users\1211551\Desktop\Websites\FCS\fcslogo.png">
    </div>


    </div>
    <form name="login" onsubmit="return validateForm() ;" method="post">
    <label><b>Username:</b></label>
    <input class="username" placeholder="Username" type="text" name="username">

    <label><b>Password:</b></label>
    <input class="password" placeholder="Password" type="password" name="password">

    <input type="button" class="submit" value="Login" name="submit" onclick="validate()">


    <div style="position:relative;left:350px;top: -10px;">
    <p>Forgot<a href="C:\Users\1211551\Desktop\Websites\FCS\help.html"> Username/Password?</a></p>



    </form>

    <script>
    function validate()
    {
    var un = document.login.username.value;
    var pw = document.login.password.value;
    var validate = false;
    var usernameArray = ["xxx", "xxxx"];
    var passwordArray= ["xxxx", "xxxxx"];
    for (var i = 0; i < usernameArray.length; i++)
    {


    if ((un == usernameArray[i]) && (pw == passwordArray[i]))
    {
    valid = true;
    break;
    }
    }

    if (valid)
    {
    window.location = "ebit.html";
    }

    }


    </script>
    </body>
    </html>

    <code ends here!>

  • #2
    This should be done in a server side language like PHP and not in javascript, but as you ask:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>FCS Home</title>
    <link rel="stylesheet" href="home.css">
    </head>
    
    <body>
    <div id="nav">
    <li><a href="C:\Users\1211551\Desktop\Websites\FCS\home.html">Home</a></li>
    <li><a href="C:\Users\1211551\Desktop\Websites\FCS\help.html">Help</a></li>
    </div>
    <!- This is for the image logo ->
    <div id="mainlogo">
    <img src="C:\Users\1211551\Desktop\Websites\FCS\fcslogo.png">
    </div>
     
    <form name="login" onsubmit="return validateForm();" method="post">
    <label><b>Username:</b></label>
    <input class="username" placeholder="Username" type="text" name="username">
    
    <label><b>Password:</b></label>
    <input class="password" placeholder="Password" type="password" name="password">
    
    <input type="button" class="submit" value="Login" name="submit" onclick="validate()">
    </form>
    
    <div style="position:relative;left:350px;top: -10px;">
    <p>Forgot<a href="C:\Users\1211551\Desktop\Websites\FCS\help.html"> Username/Password?</a></p>
    </div>
    
    
    <script>
    function validate(){
    	var un = document.login.username.value;
    	var pw = document.login.password.value;
    	var valid = false;
    	var usernameArray = ["xxx", "xxxx"];
    	var passwordArray= ["xxxx", "xxxxx"];
    	for (var i = 0; i < usernameArray.length; i++){
    		if ((un == usernameArray[i]) && (pw == passwordArray[i])){
    			valid = true;
    			break;
    		}
    	}
    
    	if (valid){
    		window.location = "ebit.html";
    	}[COLOR="#FF0000"]else{
    		alert("user name or password is invalid");
    	}[/COLOR]
    }
    </script>
    </body>
    </html>
    P.S. I corrected your code.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment

    Working...
    X