Skip to main content

Performing AJAX Validation

 



html form data (index.php)

<form id="first_form" method="POST" action="form.php">

<p class="form-message"></p> <div class="mb-3"> <input type="text" class="form-control" id="name" name="name" placeholder="Name:"> <p class="form-message"></p> </div> <div class="mb-3"> <input type="tex" class="form-control" id="email" name="email" placeholder="Email:"> <p class="form-message"></p> </div> <div class="mb-3"> <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone:"> </div> <div class="mb-3"> <input type="text" class="form-control" id="address" name="address" placeholder="Address:"> </div> <div class="mb-3"> <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject:"> </div> <div class="mb-3"> <input type="text" class="form-control" id="services" name="services" placeholder="Services:"> </div> <div class="mb-3"> <textarea class="form-control" rows="5" id="message" name="message" placeholder="Leave Your Message..."></textarea> </div> <button type="submit" name="submit" id="submit" class="btn btn-primary">Submit</button> </form>
----------------------------------------------------------------------------------------------
js code:

$(document).ready(function() { $("#first_form").submit(function(event) { event.preventDefault(); name = $("#name").val(); email = $("#email").val(); phone = $("#phone").val(); address = $("#address").val(); subject = $("#subject").val(); services = $("#services").val(); message = $("#message").val(); submit = $("#submit").val(); $(".form-message").load("form.php", { name: name, email: email, phone: phone, address: address, subject: subject, services: services, message: message, submit: 'submitted' }); }); });
----------------------------------------------------------------------------------
form.php data

if (isset($_POST['submit'])){ $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $subject = "Contact Form"; $mailTo = "hello@develoweb.com"; $headers = "From: ".$email; $txt = "You have received a message from ".$name. ".\n\n".$message; $errorEmptyname = false; $errorEmptyemail = false; $errorEmptymessage = false; $errorEmail = false; if (empty($name)) { echo "<span class='form-error'>Name Field cannot be empty</span> "; //$errorEmptyName = true; } if (empty($email)) { echo "<span class='form-error'>Email Field cannot be empty</span>"; //$errorEmptyemail = true; } if (empty($message)) { //$errorEmptymessage = true; } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo "<span class='form-error'> Write a valid e-mail addres </span>"; $errorEmail = true; } else { echo "<span class='form-success'> Thank you for your message!<br> I'll get back to you as soon as I can.</span>"; mail($mailTo, $subject, $body, $headers); } } else{ echo "There was an error!"; }

Comments