PHP/JavaScript form validation, invalid email check

Question

So i'm working on form validation for a website.

What i have accomplished so far is when the form is submitted, validate.php checks if the email is in the correct format.

If it is, it proceeds in calling the sendMail() function included in the validate.php which proceeds in sending the email and then redirects the user back to the home page after 5 seconds. (This part works <-)

If it isn't, that's where i'm stuck. What i'm trying to accomplish at this stage, is somehow get PHP to send a script tag, <script> emailError(); </script>, to the current page (contact.html) and execute the script which simply appends a paragraph saying that the email is incorrect. What i am getting, however is the validate.php has its own error in the else statement simply saying Error in a blank page (which is what i don't want, i put it there to see if the validation was working correctly).

I tried to add this (the script mentioned above) in the else statement in validate.php:

validate.php

<?php
include "mail.php";
$email = $_POST['email'];

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  sendMail();
}else {
  echo("<script> emailError(); </script>");
}
?>

So what i was hoping it would do, is echo it into the page executing the JavaScript function but it didn't work and i think i know why.

PHP, to my knowledge, executes on request of user interaction (press button, click something, etc...) or upon page loading (Correct me if i'm wrong, still learning).

To make sure that the echo did not work, i inspected the page in real-time while using the form and didn't see any sign of the script tag being inserted into the HTML.

At this point, i have tried many alternative solutions, i don't even know where to begin. I could really use some help and any tips for improving my form.

This is the contact page that i'm working on. Feel free to try it out and see the results for yourself but Please don't spam!

Click Here

emailError.js

This is what i wanted to echo into the page with PHP.

function emailError(){
    var targetElement = document.getElementById("emailform");
    var errorElement = document.createElement("P");
    var errorMessage = document.createTextNode("Invalid Email");
    errorElement.appendChild(errorMessage);
    errorElement.setAttribute("id","error");
    document.body.appendChild(errorElement);
}

contact.html

This is just a segment of contact.html showing my form.

<form action="validate.php" method="post" id="emailform">
    <required>* - Required</required><br>
    <name>Name:* <input type="text" name="name" id="name" required /></name><br>
    <email>Email:* <input type="text" name="email" id="email" required /></email>    <br>
    <message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
    <submit><input type="submit" value="Send" name="send" id="send" /></submit>
</form>

I'm not asking for something to copy n' paste, simply something to push me in the right direction.

because you can easily bypass that with disabling javaScript — xR34P3Rx
– xR34P3Rx, Commented May 27, 2015 at 19:27
try using a jquery form, if you are looking for an strong enterprise solution — Alex
– Alex, Commented May 27, 2015 at 19:29

taxicala · Accepted Answer · 2015-05-27 19:33:56Z

2

Well, first of all, You are submitting your form to validate.php, and then never redirect back to contact.html, that's why you dont see the script tag appended. And from whay i see, that string 'Error' does not appear to be in your code, so I'm guessing that you did not paste the entire code. My suggestion, is to redirect to the contact form back again if the condition fails, and change contact.html to contact.php in order to be able to do a validation. Here is some rough code:

<?php
include "mail.php";
$email = $_POST['email'];

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  sendMail();
}else {
  header('Location: contact.php?error=1');
}
?>

and then, in your contact.php file:

<form action="validate.php" method="post" id="emailform">
    <required>* - Required</required><br>
    <name>Name:* <input type="text" name="name" id="name" required /></name><br>
    <email>Email:* <input type="text" name="email" id="email" required /></email>    <br>
    <message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
    <submit><input type="submit" value="Send" name="send" id="send" /></submit>
</form>

if ($_GET['error']) {
    echo "<script> emailError(); </script>";
}

This is just a rough example, it can be more robust, with this solution, if somebody enters your contact form with the query param "error" he will get the javascript executed. But as I said, this is a concept and a rough solution to explain how you could solve your problem.

answered May 27, 2015 at 19:33

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xR34P3Rx Over a year ago

This seems like a better solution, ill try to implement it right now.

xR34P3Rx Over a year ago

Definitely a huge step up! Thanks a ton! There are a few little issues i will have to figure out but overall it works as i wanted.

taxicala Over a year ago

No problem, glad to help you out :)

xR34P3Rx Over a year ago

i have one extra question about the ...php?error=1. could i use it as ...php?error=2 to send an error regarding a different validation? i got this down working and i'm making "empty fields" validation and thought that this same solution could work well with it as well. Just curious of what this type of error handling is called. Thanks

taxicala Over a year ago

Yes you can send as many errors as you want in order to show different messages.

Ron Dadon · Accepted Answer · 2015-05-27 19:32:28Z

You can't execute java function like you are trying to.

If you use ajax, than in the success response function, set the respone to a div.

For example, if you have a success function that gets the data in an argument called data, than set an empty div with an ID like "emailResponse" in your page, and use this in the function:

var responseDiv = document.getElementById("emailResponse");
responseDiv.innerHtml = data;

Add this to your html:

<form action="validate.php" method="post" id="emailform">
    <required>* - Required</required><br>
    <name>Name:* <input type="text" name="name" id="name" required /></name><br>
    <email>Email:* <input type="text" name="email" id="email" required /></email>    <br>
    <message>Message:*<br><textarea rows="5" name="message" id="message" maxlength="1000" required></textarea></message><br>
    <submit><input type="submit" value="Send" name="send" id="send" /></submit>
    <div id="emailResponse"></div>
</form>

And in your PHP, change to this:

if (!filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
  sendMail();
  echo "Your message was sent!";
}else {
  echo "You email was invalid!";
}

UPDATE: If you are not using ajax - you need to redirect to the contact page with some parameter in GET, or set some SESSION variable.

Collectives™ on Stack Overflow

PHP/JavaScript form validation, invalid email check

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related