E-mail form validation

Question

I'm having trouble validating my e-mail form. Originally I was using PHP to send an email once the form is filled out and submitted using:

<?php
if(isset($_POST['submit'])){
$to = "me@gmail.com"; // this is your Email address
$from = $_POST['email']; // this is the sender's Email address
$first_name = $_POST['customer_name'];
$last_name = $_POST['company_name'];
$vat_number = $_POST['vat_number'];
$business_type = $_POST['business_type'];
$subject = "Customer Sign Up";
$message = $first_name . " from " . $last_name . " has applied to be a customer." . "\n\n" . "About their business:" . " " . $_POST['message'] . "\n\n" . "VAT Number: " . $vat_number . "\n\n" . "Business type: " . $_POST['business_type'];

$headers = "From:" . $from;
$headers2 = "From:" . $to;
mail($to,$subject,$message,$headers);

}
?>

This worked great (source)

I then wanted to validate the form before it was sent, jQuery seemed like a good solution so I found this from jQuery.com to validate the form before it gets sent without redirecting the user.

I copied the example just to test and the jQuery works with the validation but if correct it doesn't submit the PHP code afterwards anymore.

<form action="" method="post" class="reg-form">
          <h2>Sign up form</h2>
          <table class="form">
            <tr>
              <td><label for="customer_name">Your Name: </label></td>
              <td><input type="text" name="customer_name" class="text-input" id="test"></td>
            </tr>
            <tr>
              <td><label for="company_name">Company Name: </label></td>
              <td><input type="text" name="company_name" class="text-input"></td>
            </tr>
            <tr>
              <td><label for="vat_number">VAT Number/Tax Code: </label></td>
              <td><input type="text" name="vat_number" class="text-input"></td>
            </tr>
            <tr>
              <td><label for="email">Email: </label></td>
              <td><input type="text" name="email" class="text-input"></td>
            </tr>
            <tr>
              <td><label for="business_type">Physical or online business? </label></td>
              <td><select name="business_type"><option>Physical Store</option><option>Online Store</option><option>Physical &amp; Online store</option></select></td>
            </tr>
            <tr>
              <td><label for="message">Tell us more about your business: </label></td>
              <td><textarea rows="5" name="message" cols="50" class="textarea-input"></textarea></td>
            </tr>
            <tr>
              <td></td>
              <td><input type="submit" value="Submit" class="button green-btn" id="sign-submit" /></td>
            </tr>
          </table>
          </form>

<script>
      $("form").submit(function(event){
        if( $("#test").val() === "correct" ) {
          $("span").text("validated...").show();
          return;
        }
        $("span").text("Not valid!").show().fadeOut(100000);
        event.preventDefault();
      });
    </script>

Can anyone help me get a solution as to why the PHP won't execute after validation?

Answer 1

There is no input field with the name 'submit' in your form anymore... Probably fell off while copy-pasting the submit-button ;)

Answer 2

I think you might have forgotten to set the form action field when you copy and pasted:) If not please let us know full code.

Answer 3

Not trying to take away anything from your work, but here is a really nice jQuery form validation plugin.

It will really make your life easier.

For example:

**HTML**

<form id="myform" action="my-action" method="post" class="reg-form">
      <h2>Sign up form</h2>
      <table class="form">
        <tr>
          <td><label for="customer_name">Your Name: </label></td>
          <td><input type="text" name="customer_name" class="text-input" id="test"></td>
        </tr>
        <tr>
          <td><label for="company_name">Company Name: </label></td>
          <td><input type="text" name="company_name" class="text-input"></td>
        </tr>
        <tr>
          <td><label for="vat_number">VAT Number/Tax Code: </label></td>
          <td><input type="text" name="vat_number" class="text-input"></td>
        </tr>
        <tr>
          <td><label for="email">Email: </label></td>
          <td><input type="text" name="email" class="text-input"></td>
        </tr>
        <tr>
          <td><label for="business_type">Physical or online business? </label></td>
          <td><select name="business_type"><option>Physical Store</option><option>Online Store</option><option>Physical &amp; Online store</option></select></td>
        </tr>
        <tr>
          <td><label for="message">Tell us more about your business: </label></td>
          <td><textarea rows="5" name="message" cols="50" class="textarea-input"></textarea></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" value="Submit" class="button green-btn" id="sign-submit" /></td>
        </tr>
      </table>
      </form>

And this would be your validation script:

jQuery

var validator;

validator = $('#myform').validate({
'rules': {
    'email': {
        'required': ture,
        'email': true
    }
    'messages': {
        'email': {
            'required': "An email address is required",
                'email': "Please use a valid email address."
        }
    },
        'onkeyup': false,
        'submitHandler': function (form) {
        alert('Submit!');
        // form.submit();
    }
});

You will just need to include the validator library AFTER your jquery library call:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>