JS+PHP Form Validation issue

Question

My problem is, I want my form to be validated in js before php sends it to my email. Thats not happening. The form is being sent even with blank fields.

• it is not a problem with the script which validates the form. The validation - the js code itself - works fine.

The problem is, that the validation is kind of secondary to the php action in the form tag.

In other words: action="contact-engine.php" is previous to the onsubmit="return validateForm()".

Now if I delete the action="contact-engine.php" from my form tag, the js code will work just fine, but thats not how i want it...

So here is HTML:

<form name="myForm" method="POST" onsubmit="return validateForm(myForm)" action="contact-engine.php">
    <label for="Name" id="name">1. Name:</label>
    <input type="text" name="Name" id="Name">
    <label for="Email" id="email">2. E-mail:</label>
    <input type="text" name="Email" id="Email">
    <label for="Message" id="messg">3. Message:</label>
    <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
    <input type="submit" name="submit" value="Send" class="submit-button">

JS:

function validateForm(myForm) {
var x = document.forms["myForm"]["Name"].value;
var y = document.forms["myForm"]["Email"].value;
var z = document.forms["myForm"]["Message"].value;

if ((x == null || x == "")&&(y == null || y == "")&&(z == null || z == "")) {
    document.getElementById("name").style.color = "#ff0000";
    document.getElementById("email").style.color = "#ff0000";
    document.getElementById("messg").style.color = "#ff0000";
    return false;
}else if ((y == null || y == "")) {
    document.getElementById("email").style.color = "#ff0000";
    document.getElementById("name").style.color = "#111111";
    document.getElementById("messg").style.color = "#111111";
    return false;
}else if ((z == null || z == "")) {
    document.getElementById("messg").style.color = "#ff0000";
    document.getElementById("email").style.color = "#111111";
    document.getElementById("name").style.color = "#111111";        
    return false;
}else {
  return true;
}       

And PHP:

    <?php

$EmailFrom = "whatever@o2.pl";  
$EmailTo = "wherever@yahoo.com";
$Subject = "Message from";
$Name = Trim(stripslashes($_POST['Name'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// validation
$validationOK=true;
if (!$validationOK) {
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
  exit;
}

// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $Name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $Email;
$Body .= "\n";
$Body .= "Message: ";
$Body .= $Message;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success){
print "<meta http-equiv=\"refresh\" content=\"0;URL=../thanks.php\">";
}
//else{
  //print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
//}
?>

So as you can surely see I'm missing the connection between PHP and JS somewhere, but I'm clueless where and how and whatever.

While submitting the form it simply runs the PHP and displays success site.

So how do I prevent this from happening?

Thanks in advance guys.

Answer 1

I am not saying don't use JS, for error styling, you can validate your inputs by CSS.
Checkout this example for validating required fields.

input:invalid,
textarea:invalid {
  border-color: red !important;
}
form {
  padding: 20px; 
  max-width: 500px;
  margin: 0 auto;
}
form div {
  padding: 5px;
}
label {
  display: block;
}
input + label {
  display: inline-block;
  margin-right: 10px;
}
input[type=text],
input[type=email],
textarea {
  border: 1px solid #999;
  padding: 5px;
  width: 100%;
}

<form>
      <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" />
      </div>
      
      <div>
        <label for="email">Email</label>
        <input type="email" name="email" id="email" required />
      </div>
    
      <div>
        <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" required />
        <label for="radio-choice-1">Choice 1</label>
        
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" required />
        <label for="radio-choice-2">Choice 2</label>
      </div>
        
      <div>
        <label for="textarea">Comment</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea" required></textarea>
      </div>
    
      <div class="buttons">
        <input type="submit" value="Submit" />
      </div>
    </form>

Answer 2

<form name="myForm" method="POST" action="contact-engine.php">
    <label for="Name" id="name">1. Name:</label>
    <input type="text" onblur="validateForm()" name="Name" id="Name" required>
    <label for="Email" id="email">2. E-mail:</label>
    <input type="text" onblur="validateForm()" name="Email" id="Email" required>
    <label for="Message" id="messg">3. Message:</label>
    <textarea name="Message" onblur="validateForm()" rows="20" cols="20" id="Message" required></textarea>

    <input type="submit" disabled="true" id="subm" name="submit" value="Send" class="submit-button">
</form>
<script>
function validateForm() {
    var x = document.getElementById("Name").value;
    var y = document.getElementById("Email").value;
    var z = document.getElementById("Message").value;
    var passed = true;
    if ((x == null || x == "") { document.getElementById("name").style.color = "#ff0000"; passed = false; } else { document.getElementById("name").style.color = "#111111"; }
    if ((y == null || y == "")) { document.getElementById("email").style.color = "#ff0000"; passed = false; } else { document.getElementById("email").style.color = "#111111"; }
    if ((z == null || z == "")) { document.getElementById("messg").style.color = "#ff0000"; passed = false; } else { document.getElementById("messg").style.color = "#111111"; }
    if (passed) {
        document.getElementById("subm").disabled = false;
    } else {
        document.getElementById("subm").disabled = true;
    }
}       

</script>

Answer 3

You need to pass this into the validateForm function. Here is a short example of validating that the input is not test.

index.html:

<html>
  <head>
    <script type="text/javascript" src="validate.js"></script>
  </head>
  <body>
    <form action="http://google.com" onsubmit="return handleSubmit(this);">
      <input id="q" name="q" type="text" />
      <input type="submit" />
    </form>
  </body>
</html>

validate.js:

function handleSubmit(form) {
  var q = form.querySelector("#q");
  return q.value !== "test";
}

Answer 4

Data form validation would be a better way to approach this. Notice the required attribute, which will prevent the form from being submitted if the fields have not been populated.

<form name="myForm" method="POST" action="contact-engine.php">
    <label for="Name" id="name">1. Name:</label>
    <input type="text" name="Name" id="Name" required>
    <label for="Email" id="email">2. E-mail:</label>
    <input type="text" name="Email" id="Email" required>
    <label for="Message" id="messg">3. Message:</label>
    <textarea name="Message" rows="20" cols="20" id="Message" required></textarea>
  
    <input type="submit" name="submit" value="Send" class="submit-button">
</form>