Menu icon Foundation
Foundation form not validating

I recently followed a contact form tutorial but ever since i have updated my form doesn't work , the form is supposed to remove my contactForm Div and replace it with a message then send the submitted form to an email.

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div >
<form id = "myForm" data-abide> 
<div class = "contactForm">

<div class="name-field">
<label>Your name <small>required</small> 
<input id = "name" type="text" required > 
</label> 
<small class="error">Name is required</small> 
</div> 

<div class="email-field"> 
<label>Email <small>required</small> 
<input id ="email" type="email" required> </label> 
<small class="error">An email address is required.</small>

 </div> 

 <div class="text-field"> 
<label>Your Message <small>required</small> 
 </label> 
 <textarea id = "message" required></textarea>
<small class="error">Please enter message</small>

 </div> 

<button type="submit">Submit</button> 
</div>
</form>
</div>

    <script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.abide.js"></script>
<script>
  $(document).foundation();
</script>

<script>
$('#myForm')
.on('valid', function () {
var name = $("input#name").val():
var email = $("input#email").val():
var message = $("textarea#message").val():

//response 
var dataString = 'name' + name + 
                            '&email=' + email +
                        '&message=' + message;

// Ajax Call

$.ajax({
type:"POST",
url:"php/mail.php",
data:dataString,
success:function(){
$('.contactForm').html("<div id = "thanks"></div>");
$('#thanks').html("<h2> Thanks</h2>");
.append("<p>Dear" + name + "your message has been sent.</p>")
.hide();
.fadeIn(1400);
},
});
return false;


  });
</script>
</body>
</html>

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$msg = "
Name:$name
Email:$email
Comment:
$message";

$to = "someemail@gmail.com";
$subject = "Form";
$message = $msg;
$headers = "form";
mail($to,$subject,$message,$headers);
?>
            

         

PHPjavascriptform

I recently followed a contact form tutorial but ever since i have updated my form doesn't work , the form is supposed to remove my contactForm Div and replace it with a message then send the submitted form to an email.

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div >
<form id = "myForm" data-abide> 
<div class = "contactForm">

<div class="name-field">
<label>Your name <small>required</small> 
<input id = "name" type="text" required > 
</label> 
<small class="error">Name is required</small> 
</div> 

<div class="email-field"> 
<label>Email <small>required</small> 
<input id ="email" type="email" required> </label> 
<small class="error">An email address is required.</small>

 </div> 

 <div class="text-field"> 
<label>Your Message <small>required</small> 
 </label> 
 <textarea id = "message" required></textarea>
<small class="error">Please enter message</small>

 </div> 

<button type="submit">Submit</button> 
</div>
</form>
</div>

    <script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.abide.js"></script>
<script>
  $(document).foundation();
</script>

<script>
$('#myForm')
.on('valid', function () {
var name = $("input#name").val():
var email = $("input#email").val():
var message = $("textarea#message").val():

//response 
var dataString = 'name' + name + 
                            '&email=' + email +
                        '&message=' + message;

// Ajax Call

$.ajax({
type:"POST",
url:"php/mail.php",
data:dataString,
success:function(){
$('.contactForm').html("<div id = "thanks"></div>");
$('#thanks').html("<h2> Thanks</h2>");
.append("<p>Dear" + name + "your message has been sent.</p>")
.hide();
.fadeIn(1400);
},
});
return false;


  });
</script>
</body>
</html>

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];

$msg = "
Name:$name
Email:$email
Comment:
$message";

$to = "someemail@gmail.com";
$subject = "Form";
$message = $msg;
$headers = "form";
mail($to,$subject,$message,$headers);
?>
            

         
Rafi Benkual over 5 years ago

The validation seems to be working http://cdpn.io/tLwGJ

Are you using Ajax to add the form on the page?

Note: you don't need this <script src="js/foundation/foundation.abide.js"></script> with foundation.min.js

Matthew Whittington over 5 years ago

The email doesnt not send for some reason and the contact form isnt removed.

Matt O'Leary about 5 years ago

Any updates on this issue?