[SOLVED] PHP/AJAX Form Validation Help

serbestgezer · October 5, 2009

I am trying to send a form using Ajax validation. Validation works great but how can i send this form to next php page ex. send.php when the form successful. at the moment only shows form submitted but doesnt go anywhere.

index.php

<!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">
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<title>Ajax/CSS form validation</title>
</head>
<body>
<div id="receiver"></div>
<h3 class="headers gray">Register</h3>
<form action=""  method="post" class="appnitro" onsubmit="return false;" id="myid">
<fieldset class="register active">
	<ul>		
		<li>

			<label class="description" for="username">Username: <span class="required">*</span></label>
			<div align="left">
				<input name="username" id="username" type="text" size="45" class="element text" value="" />
				<p class="error hidden" id="err_username"></p>
			</div>

		</li>

		<li>
			<label class="description" for="password">Password: <span class="required">*</span></label>
			<span>
				<input name="password" id="password" type="password" size="19" class="element text" value="" />
				<label for="password">Password</label>
				<p class="error_small hidden" id="err_password"></p>
			</span>
			<span>
				<input name="password_confirmed" id="password_confirmed" size="20" type="password" class="element text" value="" />
				<label for="password_confirmed">Re-type Password</label>
				<p class="error_small hidden" id="err_password_confirmed"></p>
			</span>

		</li>

		<li>
			<label class="description" for="email">Email: <span class="required">*</span></label>
			<div align="left">
				<input name="email" id="email" type="text" class="element text" size="45" value="" />
				<p class="error hidden" id="err_email"></p>
			</div>

		</li>

		<li class="buttons">
			<div class="buttons">
				<button type="submit" class="positive" onclick="ajax_form('myid','validate.php','receiver');">
				<img src="http://www.drsoft.com/demo/templates/default/images/icons/user_add.gif" alt="Register" /> 
					Register
				</button>
			</div>

		</li>
	</ul>
</fieldset>
</form>
</body>
</html>

validate.php

<?php

$errors = array ();
$errors_msg = null;

function valid_email ( $str )
{
return TRUE;
}

if ( empty ( $_POST [ 'email' ] ) )
{
$errors [ 'email' ] []  = "Please enter your email\n";
}
else {
if ( ! valid_email ( $email ) )
{
	$errors [ 'email' ] [] = "Please enter a valid email\n";
}
}

if ( empty ( $_POST [ 'username' ] ) )
{
$errors [ 'username' ] [] = "Please enter your username\n";
}

if ( empty ( $_POST [ 'password' ] ) )
{
$errors [ 'password' ] [] = "Please enter your password\n";
}

if ( empty ( $_POST [ 'password_confirmed' ] ) )
{
$errors [ 'password_confirmed' ] [] = "Please enter your password again\n";
}

if ( ! empty ( $_POST [ 'password' ] ) && ! empty ( $_POST [ 'password_confirmed' ] ) && $_POST [ 'password' ] != $_POST [ 'password_confirmed' ] )
{
$errors [ 'password_confirmed' ] [] = "Your passwords do not match\n";
}

if ( is_array ( $_POST ) )
{
foreach ( $_POST as $key => $value )
{
	if ( array_key_exists ( $key, $errors ) )
	{
		foreach ( $errors [ $key ] as $k => $v )
		{
			$errors_msg .= "error|$key|$v";
		}
	}
	else {
		$errors_msg .= "ok|$key\n";
	}
}
}

echo $errors_msg;

custom.js

function ajax_form(form,site_url,link_id){
var req = jQuery.post
( 
	site_url, 
	jQuery('#' + form).serialize(), 
	function(html){
		var explode = html.split("\n");
		var shown = false;
		var msg = '<b>You have errors in your form. Please check the following fields and try again:</b><br /><br /><ol>';
		for ( var i in explode )
		{
			var explode_again = explode[i].split("|");
			if (explode_again[0]=='error')
			{
				if ( ! shown ) {
					jQuery('#' + link_id).show();
				}
				shown = true;
				add_remove_class('ok','error',explode_again[1]);
				jQuery('#err_' + explode_again[1]).html(explode_again[2]);
				msg += "<li>" + explode_again[1] + "</li>";
			}
			else if (explode_again[0]=='ok') {
				add_remove_class('error','ok',explode_again[1]);
				jQuery('#err_' + explode_again[1]).hide();
			}
		}

		if ( ! shown )
		{
			jQuery('#' + link_id).html("Form submitted successfully");
			add_remove_class('error','success',link_id);
			jQuery('#' + link_id).show();
		}
		else {
			add_remove_class('success','error',link_id);
			jQuery('#' + link_id).html(msg + "</ol>");
		}

		req = null;
	}
);
}

function add_remove_class(search,replace,element_id)
{
if (jQuery('#' + element_id).hasClass(search)){
	jQuery('#' + element_id).removeClass(search);
}
jQuery('#' + element_id).addClass(replace);
}

RussellReal · October 5, 2009

onsubmit="return false;"

in the form tag

change that to: onsubmit="return theJSFunction();"

and make theJSFunction() return true or false.. true to submit.. false to not submit

serbestgezer · October 5, 2009

thanks Russell,

how do you do theJSFunction() return true or false.. true to submit?

RussellReal · October 5, 2009

exactly

serbestgezer · October 5, 2009

I am not good with javascript. how do you write the statement?

RussellReal · October 5, 2009

return true; for TRUE

and.. return false; for FALSE

serbestgezer · October 5, 2009

good on ya

serbestgezer · October 5, 2009

I did something like that

function theJSFunction()
{
if(true)
{
	document.frm.submit();
	}

}

but doesnt do anything. any ideas?

RussellReal · October 5, 2009

you're gonna want this function to also validate the form.. I can't camp here all day when I'm mostly here for php.. also I'm watching UFO Files and stuff and its interesting

I advise some mod or something on these forums here to move this to the javascript forum, because this is in no way a PHP question, and people more interested in PHP will be more than happy to help (and they're probably also not watching UFO Files, since UFO Files is mostly for PHP Pros )

serbestgezer · October 5, 2009

I dont know why it doesnt work.

I changed it something like

if ( ! shown )
                        {
                                jQuery('#' + link_id).html("Form submitted successfully");
                                add_remove_class('error','success',link_id);
                                jQuery('#' + link_id).show();
                                document.frm.submit();
                        }

I believe it should work but it doesnt ????

serbestgezer · October 5, 2009

Russel if dont know the answer you dont have to reply anything.

My advice for you go to youtube and comment on people's videos

RussellReal · October 5, 2009

Russel if dont know the answer you dont have to reply anything.

My advice for you go to youtube and comment on people's videos

Excuse me, first of all, I been web developing for 5 years now, and a simple iteration of inputs is not exactly a HARD subject for me, its actually quite easy. I was simply saying this question (judging by your knowledge level) I will be here for hours trying to guide you in the right direction. Now, I could just give you code that will work good for you, but that defeats the purpose of "HELP". Also, this IS NOT the right forum for this question, so if you WANT to get helped, post in the APPROPRIATE forum. As I stated before a mod should move this.

Also, I take offense to the youtube pun. Youtube is really lame for documentaries and other educational media. Its mostly for fart humor and pitch impaired 12 year-olds with fictional crack-whore parents.

Best Wishes,

Russell

serbestgezer · October 5, 2009

How old are you little fellow?

RussellReal · October 5, 2009

How old are you little fellow?

19, your point is? I am really not interested in getting into fights on a forum which I highly enjoy being a part of.

I tried to help you above and told you how you'd achieve what you were intending to achieve, it is not my fault you're gonna need someone to re-create your whole code because you're not up to par with your JavaScript.

As far as my age goes, being 19 does not make me any different than any other web developer, the years I've invested into it is the difference, My skills is what makes the difference. Please don't try and egg me into giving you something which will not make you any smarter, will actually do the complete opposite, and arguing with me HERE in PHP Help is not getting your topic solved any faster.

serbestgezer · October 5, 2009

Jeez Christ Little Fellow you are on fire. take it easy. As I see from your comments you are very suitable to youtube. I am always wondering who writes a comments on youtube. I came across with one of them. Just shut your mouth and play with yourself

serbestgezer · October 5, 2009

you are itchy arent you? hahahahaha

RussellReal · October 5, 2009

Jeez Christ Little Fellow you are on fire. take it easy. As I see from your comments you are very suitable to youtube. I am always wondering who writes a comments on youtube. I came across with one of them. Just shut your mouth and play with yourself

This will be my last post on this topic, I just want you to know you have egged me into posting countless meaningless posts. Before this topic all or 99.9% of my posts were aimed at helping somebody or suggesting something. Now I'm feeling more and more retarded and less helpful and more of a spammer. Thanks for wasting my time, and valuable database space on this EXTREMELY helpful forum.

In all seriousness though, I hope your topic gets solved soon, but as humbly as possible I am suggesting you create a topic in the javascript section of this forum, you will have this topic solved waaay faster.

Russell

serbestgezer · October 5, 2009

look kid I didnt really wanna upset you. I think I am having a bit busy day and you were the little fish in the tank.

Anyway, sorry to bother you.

Kindly Regards

Serbestgezer

Sign In

[SOLVED] PHP/AJAX Form Validation Help

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information