Form validation problem

ComGuar · May 29, 2012

Hello guys!

I have problem with form validation script.

Everything is working fine, except captcha input.

When I enter something (few letters or numbers) in input it should return true (success), but every time is false.

Why? Where I make a mistake?

18488_.zip

ComGuar · May 29, 2012

I'll paste codes here, to make easier to you


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Registration - 127.0.0.1</title>
<style type="text/css">
body, td, tr {text-decoration: none; font-family: verdana, arial, helvetica, sans-serif; font-size: 8pt; cursor: default; color: #666;}
body {margin: 5px; padding: 5px; background: #fff; color: #666;}
legend {color: #ccc; width: 100%; font-size: 12px; font-weight: bold; border-bottom: solid 1px #f7f7f7; padding-bottom: 5px; margin-bottom: 5px;}
fieldset {border: solid 1px #fff; padding-bottom: 10px;}
form {margin: 0px; padding: 0px;}
a:active, a:visited, a:link {color: #446488; text-decoration: none; font-size: 10px;}
a:hover {color: #00004f; text-decoration: none; font-size: 8pt;}
a.nav:active, a.nav:visited, a.nav:link {color: #666; font-size: 10px; font-weight: bold; text-decoration: none;}
a.nav:hover {font-size: 10px; font-weight: bold; color: #666; text-decoration: underline;}
input, select {font-size: 8pt;}
textarea {width: 100%; font-size: 9pt; padding: 5px;}
div { margin: 1px 0px 1px 0px; padding: 5px 5px 5px 5px;}  
table { margin: 1px 0px 1px 0px; padding: 1px 1px 1px 1px; font-size: 13px;}
.a {border-bottom: 1px solid #ccc; color: #666; background: #E9E9E9;}
.b {font-size: 13px; color: #666; background-color: #E5E5E5; padding: 3px; color: #666; }
.c {border-top: 1px solid #ccc; color: #666; background: #E9E9E9;}
.d {font-size: 14px; font-weight: bold; color: #666; text-decoration: none;}
.q {font-family: Times, serif;  font-style: italic; color: navy;quotes: "\00AB" "\00BB"}
.container {
margin: 0 auto;
width: 780px;
text-align: left;
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head><body bgcolor="#000000"><div class="container"><div class="a" id="up"><img src="http://127.0.0.1/images/img/logo.gif" alt="" /></div><a href="../pages/login.php?">Login</a> <a href="../pages/registration.php?">Registration</a> <a href="../mail/lostpassword.php?">Password forgotten</a><br />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="validate.js" charset="utf-8"></script>



<form id="jform" method="post" action="reguser.php?"><label for="log" class="block">Username:</label><input name="log" id="log" maxlength="40" /><br /><label for="par" class="block">Password:</label><input name="par" id="par" type="password" maxlength="20" /><br /><label for="pars" class="block">Repeat password:</label><input name="pars" id="pars" type="password" maxlength="20" /><br /><label for="email" class="block">Email:</label><input name="meil" id="email" maxlength="50" value="@" /><br /><label for="captcha" class="block">Captcha:</label>

    <img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" />
    <br />
    <input type="text" name="captcha_code" id="captcha" size="10" maxlength="10" />
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
    <br /><br /><button type="submit" id="send">submit</button></form><hr />You must fill in all the fields. You can add more informations about you after you register.<br />You will receive informations on your email address<br /><br /><img src="../images/img/edit.gif" alt="" /> <a href="siterules.php?">Site rules</a><br /><img src="../images/img/homepage.gif" alt="" /> <a href="../?">Main page</a><div class="c" id="down"><a href="http://127.0.0.1/?">&#169; 127.0.0.1</a><br /><a href="../pages/online.php?">[Online: 0/1]</a><br /></div>
</div></body></html>

java script

$(document).ready(function(){
// ====================================================== //

var jVal = {
'fullName' : function() {

	$('body').append('<div id="nameInfo" class="info"></div>');

	var nameInfo = $('#nameInfo');
	var ele = $('#fullname');
	var pos = ele.offset();

	nameInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	if(ele.val().length < 6) {
		jVal.errors = true;
			nameInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
			ele.removeClass('normal').addClass('wrong');				
	} else {
			nameInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},


'logName' : function() {

	$('body').append('<div id="logInfo" class="info"></div>');

	var logInfo = $('#logInfo');
	var ele = $('#log');
	var pos = ele.offset();

	logInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	if(ele.val().length < 6) {
		jVal.errors = true;
			logInfo.removeClass('correct').addClass('error').html('← at least 6 characters').show();
			ele.removeClass('normal').addClass('wrong');				
	} else {
			logInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},

'password' : function() {

	$('body').append('<div id="passInfo" class="info"></div>');

	var passInfo = $('#passInfo');
	var ele = $('#par');
	var pos = ele.offset();

	passInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	if(ele.val().length < 6) {
		jVal.errors = true;
			passInfo.removeClass('correct').addClass('error').html('← Please provide a password').show();
			ele.removeClass('normal').addClass('wrong');				
	} else {
			passInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},

'password2' : function() {

	$('body').append('<div id="pass2Info" class="info"></div>');

	var pass2Info = $('#pass2Info');
	var ele = $('#pars');
	var pos = ele.offset();

	pass2Info.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	if(ele.val().length < 6) {
		jVal.errors = true;
			pass2Info.removeClass('correct').addClass('error').html('← Please provide a password').show();
			ele.removeClass('normal').addClass('wrong');				
	} else {
			pass2Info.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},

'captchax' : function() {

	$('body').append('<div id="captchaInfo" class="info"></div>');

	var captchaInfo = $('#captchaInfo');
	var ele = $('#captcha');
	var pos = ele.offset();

	captchaInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	if(ele.val().length < 6) {
		jVal.errors = true;
			captchaInfo.removeClass('correct').addClass('error').html('← Please enter captcha code').show();
			ele.removeClass('normal').addClass('wrong');				
	} else {
			captchaInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},

'birthDate' : function (){

	$('body').append('<div id="birthInfo" class="info"></div>');

	var birthInfo = $('#birthInfo');
	var ele = $('#birthday');
	var pos = ele.offset();

	birthInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;

	if(!patt.test(ele.val())) {
		jVal.errors = true;
			birthInfo.removeClass('correct').addClass('error').html('← type in date in correct format').show();
			ele.removeClass('normal').addClass('wrong');					
	} else {
			birthInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}	
},

'gender' : function (){

	$('body').append('<div id="genderInfo" class="info"></div>');

	var genderInfo = $('#genderInfo');
	var ele = $('#woman');
	var pos = ele.offset();

	genderInfo.css({
		top: pos.top-10,
		left: pos.left+ele.width()+60
	});

	if($('input[name="gender"]:checked').length === 0) {
		jVal.errors = true;
			genderInfo.removeClass('correct').addClass('error').html('← are you a man or a woman?').show();
			ele.removeClass('normal').addClass('wrong');		
	} else {
			genderInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}	
},

'vehicle' : function (){

	$('body').append('<div id="vehicleInfo" class="info"></div>');

	var vehicleInfo = $('#vehicleInfo');
	var ele = $('#ship');
	var pos = ele.offset();

	vehicleInfo.css({
		top: pos.top-10,
		left: pos.left+ele.width()+40
	});

	if($('input[name="vehicle"]:checked').length <= 1) {
		jVal.errors = true;
			vehicleInfo.removeClass('correct').addClass('error').html('← I\'m sure you have at least two!').show();
			ele.removeClass('normal').addClass('wrong');		
	} else {
			vehicleInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}	
},

'email' : function() {

	$('body').append('<div id="emailInfo" class="info"></div>');

	var emailInfo = $('#emailInfo');
	var ele = $('#email');
	var pos = ele.offset();

	emailInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	var patt = /^.+@.+[.].{2,}$/i;

	if(!patt.test(ele.val())) {
		jVal.errors = true;
			emailInfo.removeClass('correct').addClass('error').html('← give me a valid email adress, ok?').show();
			ele.removeClass('normal').addClass('wrong');					
	} else {
			emailInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},

'about' : function() {

	$('body').append('<div id="aboutInfo" class="info"></div>');

	var aboutInfo = $('#aboutInfo');
	var ele = $('#about');
	var pos = ele.offset();

	aboutInfo.css({
		top: pos.top-3,
		left: pos.left+ele.width()+15
	});

	if(ele.val().length < 75) {
		jVal.errors = true;
			aboutInfo.removeClass('correct').addClass('error').html('← come on, tell me a little bit more!').show();
			ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});		
	} else {
			aboutInfo.removeClass('error').addClass('correct').html('√').show();
			ele.removeClass('wrong').addClass('normal');
	}
},

'sendIt' : function (){
	if(!jVal.errors) {
		$('#jform').submit();
	}
}
};

// ====================================================== //

$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
	jVal.errors = false;
	jVal.logName();
	jVal.password();
	jVal.password2();
	jVal.email();
	jVal.captchax();
	//jVal.fullName();
	//jVal.birthDate();
	//jVal.gender();
	//jVal.vehicle();
	//jVal.about();
	//jVal.sendIt();
});
return false;
});

$('#log').change(jVal.logName);
$('#par').change(jVal.password);
$('#pars').change(jVal.password2);
$('#email').change(jVal.email);
$('#captcha').change(jVal.captchax);
//$('#fullname').change(jVal.fullName);
//$('#birthday').change(jVal.birthDate);
//$('input[name="gender"]').change(jVal.gender);
//$('input[name="vehicle"]').change(jVal.vehicle);

//$('#about').change(jVal.about);

// ====================================================== //
});

.josh · May 29, 2012

Can't really see what's wrong, from the code you provided. Most likely the issue is server-side. Captcha is usually done by outputting the image, but also with a session variable that keeps track of the generated captcha code/phrase. Then when the form is submitted, your server-side code compares the submitted captcha code/phrase to the session variable.

You said that you are able to enter in the captcha code/phrase, so I assume that you are seeing random captcha image outputting. Did you verify that your reguser.php is receiving your inputted captcha code/phrase (do you see it in the post request? are you using the correct $_POST['captcha_code'] variable?) What is your reguser.php script comparing the posted value to? As mentioned, it would usually be a session variable something like $_SESSION['captcha_code'] . Did you echo it out to verify that it is what it is supposed to be?

ComGuar · May 29, 2012

Captcha is working great. Problem is that java script form validation is't working.

Error is always "← Please enter captcha code".

.josh · May 29, 2012

hmm how long is your captcha val? looks like you get that error if the length is less than 6, so it's got to be at least 7 chars long.

change this:

if(ele.val().length < 6) {

to this:

console.log(ele);

console.log(ele.val().length);

if(ele.val().length < 6) {

then look in your console log (or change console.log(...) alert(...) if you have no idea what i'm talking about). What are you seeing?

ComGuar · May 31, 2012

When I am typing in captcha input it does not show any response, like I didn't write anything,

and when i click on submit button it show "Please enter captcha code", like I didn't entered anything, even when I enter 10 chars.

Console log does not report eny problem.

ComGuar · June 2, 2012

I attached files in my first post, there you can see what's wrong.

I tried to change

if(ele.val().length < 6) {

to

if(ele.val().length < 3) {

but didn't helped.

Sign In

Form validation problem

Recommended Posts

ComGuar

Link to comment

Share on other sites

ComGuar

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

ComGuar

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

ComGuar

Link to comment

Share on other sites

ComGuar

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information