Member Avatar for Archo

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!

  • 3 Contributors
  • 5 Replies
  • 289 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Archo
Member Avatar for essential

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 for itsjareds

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 for Archo

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 for essential

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...

Member Avatar for Archo

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.