form validation with javascript to php

Question

I find this code in W3Schools. It's about form validation with Javascript.

When the user tape wrong mail format, an alert is appear.

When I check the code I see on form onsubmit="return validateForm();, well the function return false in error case.

So my question is how to get the boolean value from javascript to use it in PHP to write error message instead of use of message box.

This is my code:

<html>
<head>
    <script type="text/javascript">
    function validateForm()
    {
    var x=document.forms["myForm"]["email"].value
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
      alert("Not a valid e-mail address");
      return false;
      }
    }
    </script>
    </head>

    <body>
    <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
    Email: <input type="text" name="email">
    <input type="submit" value="Submit">
    </form>
</body>

</html>

Thanks in advance.

Ali

W3Schools is unreliable: See W3Fools

Kevin Ji
– Kevin Ji

2011-06-29 19:56:43 +00:00
Commented Jun 29, 2011 at 19:56 — Kevin Ji
– Kevin Ji, Commented Jun 29, 2011 at 19:56

Daniel Bingham · Accepted Answer · 2011-06-29 20:00:32Z

You can't get the boolean value from javascript. What you need to do is have an error div ready in advance. Something like this:

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<div id="error"></div>
<input type="submit" value="Submit">
</form>

Add css to it to hide it. Then in your validation form, use javascript to alter the HTML of the error div.

  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
      document.getElementById("error").innerHTML="Not a valid e-mail address";
      return false;
  }

The "return false;" part is to tell the form not to submit. As mentioned in other answers PHP and Javascript do not interface. PHP is server side, Javascript is client side. They don't talk to each other. They can, however, both modify the HTML. Just remember, Javascript always runs in the browser. So if it needs to send things to PHP you need to use AJAX to call a server side PHP script and send the information that way. Most of the time, however, when you are using Javascript, it isn't PHP that needs the information, it's the user. So using Javascript to modify the HTML does the trick.

MRR0GERS · Accepted Answer · 2011-06-29 20:05:27Z

6

if (..)
{
   document.getElementByID('error').InnerHTML = "Not a valid e-mail address!";
   return false;
}
else
{
   document.getElementByID('error').InnerHTML = "";
}

and in your markup add:

<span id="error"></span>

edited Jun 29, 2011 at 20:05

answered Jun 29, 2011 at 19:57

MRR0GERS

6626 silver badges18 bronze badges

Comments

Joe · Accepted Answer · 2011-06-29 20:04:54Z

I wouldn't use PHP for this.

<html>
<head>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  document.getElementById('errorMsg').style.display = 'block';
  return false;
  }
}
</script>
</head>

<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
<div id="errorMsg" style="display: none;">Not valid email</div>
</form>
</body>

</html>

This way you won't have to go back to your server.

Major Productions · Accepted Answer · 2011-06-29 19:55:32Z

Outside of using AJAX, you can't. Remember that PHP is a server side language, and that JavaScript runs on the client in the browser. By the time PHP renders the page in the browser, it's done processing. What you need is two layers of validation - JavaScript validation AND PHP validation. Why? Because JavaScript can be turned off in the browser. That makes it useless as a security measure. JavaScript validation should only be used as a way to enhance the user's experience.

Finally, don't go to w3schools. A lot of its information is invalid (see the site http://www.w3fools.com for more info). Instead, use Mozilla's Developer Network: https://developer.mozilla.org/en-US/learn/

Tim Almond · Accepted Answer · 2011-06-29 19:55:46Z

3

The easiest thing is to do the display in the function. Replace the alert with something like:-

document.getElementById("errormessage").innerHTML="Not a valid e-mail address";

You'll also need a DIV in your HTML with an id of errormessage.

answered Jun 29, 2011 at 19:55

Tim Almond

12.8k10 gold badges42 silver badges50 bronze badges

Collectives™ on Stack Overflow

form validation with javascript to php

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Related