Im working on a <form> Login page. I am using PHP for the server side, javascript for basic client side validation.
The page works. Here is my problem:
If the login entry hits the server and is wrong, the error message bounces back to the user and the page no longer works in that I cannot re-submit an email and password for the login. I have to reload the page.
I can type in the login and password but the submit button is dead. Like I said If the user login is correct then everything works. The javascript catches syntax errors and the page will continue to work with a correct login. Its only when login is wrong and the server bounces back the incorrect login message. I've included all the code. VVVVV
Also I've been programming php, java, javascript for about a year learning through books and the web, part-part time. I'm a little stumped here.
Code: Select all
<?php #login.php
require_once('includes/config.inc.php');
include('includes/header_16.php');
if (isset($_POST['submitted']) ) {
require_once(MYSQL);
if(!empty($_POST['email']) ){
$e = mysqli_real_escape_string( $dbc, $_POST['email']);
} else {
$e = FALSE;
echo '<p class="error"> You forgot your email </p>';
}
if (!empty($_POST['pass']) ) {
$p = mysqli_real_escape_string( $dbc, $_POST['pass']);
} else {
$p = FALSE;
echo '<p class="error"> <p>You forgot the password.</p>';
}
if ($e && $p) { // IF the form has a email and password that is correct
$q = "SELECT team_id, user_id, first_name, user_level, team_name
FROM Team_List
WHERE (email='$e' AND pass='$p')
AND active IS NULL";
$r = mysqli_query($dbc, $q) or trigger_error("Query: $q\br />MYSQL Error: ". mysqli_error($dbc) );
if (@mysqli_num_rows($r) == 1) {
$_SESSION = mysqli_fetch_array($r, MYSQLI_ASSOC);
mysqli_free_result($r);
mysqli_close($dbc);
$url = BASE_URL . 'index.php?team_id=' . $_SESSION['team_id']
. '&team_name=' . $_SESSION['team_name'];
ob_end_clean();
header("Location: $url");
exit();
} else {
---->>>problem >>> echo '<p class="error"> Either the email or your password do not match. <br />
Your account is not active yet. </p>';
//for some reason this script doesnt let me go twice if this error comes back `
}
} else {
'<p class="error"> Please try again. </p>';
}
mysqli_close($dbc);
}
?>
<script type="text/javascript" src="includes/check_login.js"></script>
<!-- <link href="login_style.css" rel="stylesheet" type="text/css" /> -->
<p align="left">
<small>**browser must allow cookies <br />
enable javascript for login. </small></p>
<form action="login.php" method="post" id="login">
<fieldset>
<p><label for="email">Email: <input type="text" name="email" size="20" maxlength="40" class="required email" /> </label></p>
<p><label for="pass">Password: <input type="password" name="pass" size="20" maxlength="20" class="required password" /></label></p>
<div align="center">
<input type="submit" name="submit" value="Login" /> <input type="reset" />
<input type="hidden" name="submitted" value="TRUE" />
</div>
</fieldset>
</form>
<?php
include('includes/index_footer_16.php');
?>
///JAVASCRIPT file
// emailCheck.js
document.write("check_login.js loaded");
window.onload = startForm;
/*this script checks the form for errors prior
* to submition to the server for processing
*
*/
//===================
function startForm(){
for (var i = 0; i < document.forms.length; i++) {
//adds a call to validForm() to onsubmit
document.forms[i].onsubmit = function() { return validForm();}
}
}
function validForm(){
//Variables
var allGood = true;
var allTags = document.getElementsByTagName("*");
//loops through all the tags in the array allTags.length
for (var i = 0; i < allTags.length; i++){
//Checks if any tags should be false... if so
if (!validTag(allTags[i]) ) {
allGood = false;
}
}
return allGood; //which is ether true or false,
//accepts on argument which is the Array() allTags[i].
function validTag(thisTag) {
var outClass = "";
//takes the tag, and splits it into a string
//also creates an array of classes.
var allClasses = thisTag.className.split(" ");
//loops through the objects of tags + classes
// once for each class.
for(var j = 0; j < allClasses.length; j++ ){
outClass += validBasedOnClass(allClasses[j]) + " ";
}
//Attribute of thisTag.className overwrites the
//form's class attribute for that tag.
thisTag.className = outClass;
// saying if outClass contains the word
// bring that tag infocus
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
//brings problem input infocus
thisTag.focus();
// selects the input with the error
// and selects the value
if(thisTag.nodeName == "INPUT") {
thisTag.select();
}
//fail the form
return false;
}
return true;
function validBasedOnClass(thisClass) {
//this will contain the class to be returned.
// the value we will send back to the form.
var classBack ="";
// looks at a single class and does something
// based on its vaule.
switch(thisClass) {
case "":
case "invalid":
break;
case "required":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
// Appends the current value to classBack.
classBack += thisClass;
break;
case "email": //checks that something has been entered
if(allGood && !validEmail(thisTag.value) ) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "password":
if(allGood && !validPassword(thisTag.value) ) {
classBack = "invalid ";
}
classBack += thisClass;
break;
default: //catches all the tags that dont meet the requirement
// this checks the password1 against password2 using the
// class attribute value of password 1
if (allGood && !crossCheck(thisTag, thisClass) ) {
classBack = "invalid ";
}
classBack += thisClass;
break;
} // end switch
return classBack;
}
function crossCheck(inTag, otherFieldID) {
//takes in current tag, and the id of the other field.
// if the other field doesnt exsist then return false
if (!document.getElementById(otherFieldID) ) {
// if other field doesnt exsist no check can be done
// so false is returned;
return false;
}
// if check can be done and both are the same TRUE is returned.
//vvv this line compared fields to see if they were equal
//return (inTag.value == document.getElementById(otherFieldID).value);
// this line compares fields to assure they are not empty
return (inTag.value != "" || document.getElementById(otherFieldID).value != "") ;
}
//=====================
function validEmail(email) {
var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
return re.test(email);
}
function validPassword(password) {
var re = /^\w+$/;
return re.test(password)
}
//================================
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL"){
parentTag.className += "invalid";
}
} // end invalidLabel()
}
}