I have found a couple of topics with the same issue but I dont know how to adapt to my example.
I have this login form:
<form action=do_login.php?id= method=post>
<label>Enter your Frequent Diner ID</label><br>
<div class="shake-id">
<input id="fd-id" class="login-input" type="text" name=loginid value="" maxlength="8" placeholder="Frequent Diner ID" /><br>
</div>
<div class="id-alert" style="display: none;">Your Frequent Diner ID must have 8 digits. Check and try again</div>
<label>Enter your Password</label><br>
<div class="shake-pass">
<input id="pass" class="login-input" type="password" name=password value="" maxlength="20" placeholder="Password" /><br>
</div>
<input type=hidden name=call_from value="login.php">
<input type=hidden name=forward_url value="<?PHP echo urlencode(@$_REQUEST["forward_url"])?>"><br><br>
<input type=submit value="Login">
</form>
then I have this file to do the login:
<?php
require_once( "config.php");
require_once( PATH_FUNCTION."/check_permission.php");
//default login fail landing page
$redirect = (isset($_REQUEST['call_from']))?PAGE_LOGINFAIL:PATH_PUBLIC;
$errcode = "err1";
$forward_url = "";
if (strlen($_REQUEST['loginid'])>0&&strlen($_REQUEST['password'])>0) {
unset($_SESSION["user"]);
$fields = array(
"loginid" => @$_REQUEST['loginid'],
"password"=> @$_REQUEST['password']
);
$user = new user("cuisine_user",$fields);
$data=$user->login();
if ($data&&$data["login_fail"]==0) {
$errcode = "err0";
$redirect=(@$_REQUEST['forward_url'])?urldecode(@$_REQUEST['forward_url']):PATH_PUBLIC;
//get session
$session=new session();
$_SESSION["site_".SITE."_id"]=$session->newSession();
//get user session
$_SESSION["user"]=$data;
$set_f = array("login_count"=>1+$data['login_count'],"login_fail"=>0);
$where_f = array("id"=>$data['id']);
$user->update($set_f,$where_f);
if (isset($_REQUEST['forward_url'])){
$_SESSION["logout_url"] = PATH_PUBLIC;
}
else{
if (isset($_SESSION['preview_mode']) && $_SESSION['preview_mode'])
$_SESSION["logout_url"] = PATH_PUBLIC."?mode=1";
else
$_SESSION["logout_url"] = PATH_PUBLIC;
}
if (isset($_REQUEST['forward_url']))
header('Location: '.$redirect);
echo "200:".$_SESSION["user"]["username"];
}
else
{
// add login fail by 1
if ($data['login_fail']>0){
$set_f = array("login_fail"=>$data['login_fail']);
$where_f = array("id"=>$data['id']);
//$user->update($set_f,$where_f);
}
$forward_url = (@$_REQUEST['forward_url'])?'&forward_url='.urldecode(@$_REQUEST['forward_url']):'';
if (isset($_REQUEST['forward_url']))
header('Location: '.$redirect."?code=".$errcode.$forward_url);
echo "300";
}
}
else {
$forward_url = (@$_REQUEST['forward_url'])?'&forward_url='.urldecode(@$_REQUEST['forward_url']):'';
if (isset($_REQUEST['forward_url']))
header('Location: '.$redirect."?code=".$errcode.$forward_url);
echo "400";
}
die();
?>
And finally this script to chech the fields:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
//BLOCK THE LETTERS AND DOT/SLASH/ETC IN FD NUMBER
$(document).ready(function() {
$("#fd-id").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
//CHECK WHEN CUSTOMER SUBMIT
$('form').submit(function () {
var value = document.getElementById('fd-id').value;
if (value.length !== 8) {
$('.shake-id').effect( "shake" );
$('.id-alert').fadeIn('slow');
$('#fd-id').addClass('input-wrong');
return false;
}
});
//ACTIVATE FUNCTION VALIDATE
$("#fd-id").on('input', validate);
//CLEAN THE WRONG MESSAGE IF THE CUSTOMER TYPE ALL THE DIGITS
function validate() {
var value = document.getElementById('fd-id').value;
if (value.length == 8) {
$('.id-alert').fadeOut('slow');
$('#fd-id').removeClass('input-wrong');
}
else if (value.length == 0) {
$('.id-alert').fadeOut('slow');
}
}
</script>
Well now I want to validate with javascript the password and the logingid in the same file than I have my form. So I can add some friendly effects like the ones I have now. Any ideas? Becasue if I go to the other file I can not add then the effects.
I think you're taking the wrong approach to input validation. Think of it as a set of rules that the user has to follow and as long as there are errors the form will not be sent.
You shouldn't have to block characters or what not. Let the user fill it out as he pleases and you can validate (or mark it as wrong) the input when the input changes focus and when the user attempts to submit.
Now you can do this multiple different ways, but today splitting server and client side work is popular. It's good to have a full checking system client side, and when everything seems ok you send it to the server for more checking.
Form validators take the exact same approach. Since you are using jQuery you might as well use a validator. There are many different ones that exist:
They all work pretty much the same way. I've personally used the first one.
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
Here it is in action if you wanted to try it out.