1,105,263 Community Members

Javascript form validation to PHP processing

Member Avatar
Archo
Newbie Poster
3 posts since May 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hello!

I am a n00b to both PHP and Javascript, so please bear with me...

I have a form and I use Javascript to validate the form. If there is an error on the for it displays the appropriate alert. The problem I have is when I click "OK" on the alert it processes the form anyways.

I am guessing I need to put something in the javascript that prevents the form from being processed, but I have no idea what I should be putting there.

Both the javascript validation and PHP processing pointers are included in my form tag.

<form name="form" onsubmit="Validate()" method="post" action="process.php">

Should I move the PHP action so it's included in the javascript function?

Thanks for taking the time to look at this!

Member Avatar
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 84 [?]
Q&As Helped to Solve: 138 [?]
Skill Endorsements: 0 [?]
Featured
 
0
 

Prevent form processing, if the user failed to supply valid data in the UI field's.
Here's one quick demo to get you started.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test Page</title>

<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

h2 {
  background-color : #ccc;
  border-bottom : 1px solid #708090;
  border-top : 1px solid #708090;
  font : 700 160% "Bernard MT Condensed";
  line-height : 2ex;
  margin-top : 0;
  min-height : 2ex;
  padding : .100em 0em .100em 1em;
  white-space : nowrap; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : 100%;
  overflow : hidden;
  width : 98%; }

div.tube {
  border : 1px solid #ccc;
  height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var validate;

validate = function( form ) {
  if ( !/^\w{5,10}$/.test( form.names.value )) { // If the codition failed alert the user
  alert( "\nName's must be 5 or 10 characters long." );
  form.names.focus();
  return false; // Stop the form processing.
  } return true; // Submit the form if your codintion is achieved.
}
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">

<h2>JavaScript Live Demo</h2>
<form id="myForm" method="post" action="process.php" onsubmit="return validate( this );"
<div>
<label for="names">Name: <input type="text" id="names" name="names" size="30" /></label> <input type="submit" id="sbm" name="sbm" value="submit" /></div>
</form>
</div>
</div>
</body>
</html>

hope it helps...

Member Avatar
itsjareds
Junior Poster
103 posts since May 2009
Reputation Points: 29 [?]
Q&As Helped to Solve: 13 [?]
Skill Endorsements: 0 [?]
 
0
 

The basic line that will stop the form from processing is adding this in your JavaScript if the validation failed:

if (validationFailed)
  return false;

Only return true if the validation is true, if it fails, then return false.

Member Avatar
Archo
Newbie Poster
3 posts since May 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

I have "return false" in my script and it stops the validation process at that point, but it still does the PHP processing.

So I am trying to figure out how to prevenet the PHP processing if the script returns false.

Do I put the PHP script in the javascript instead of a return true?

Member Avatar
essential
Posting Shark
974 posts since Aug 2008
Reputation Points: 84 [?]
Q&As Helped to Solve: 138 [?]
Skill Endorsements: 0 [?]
Featured
 
0
 

But it has to stop. Javascript will prevent the execution of whole block if it reads any line of return false; in your statement.
Try the following lines in your <head> and see how it worked:

<script type="text/javascript">
<!--
var validate;
   validate = function( form ) {
      if ( whateverIstrue ) {
      // More legal statements -->
      form.action = "./process.php";
      form.submit();
      } return false; // Condition failed and it has to stop...
   };
// -->
</script>

from the <body> :

<form id="myForm" action="javascript:void(0);" method="post" onsubmit="return validate( this );">
<!-- FORM ELEMENTS -->
</form>

if it still doesn't catch the issue, then make some recap's in your javascript code and see if you have any broken line's in the script.

Or you can just post your code, and let us examine it, so that we can provide further solutions...

Question Answered as of 4 Years Ago by essential and itsjareds
Member Avatar
Archo
Newbie Poster
3 posts since May 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

The form action is exactly what I needed, thank you!

You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article