Different behavior between Bootstrap 3 and 4 form validation? - php

Question

I having issues using a Bootstrap form validation library on my form. For some reason, this works really well on Bootstrap 3, but NOT on Bootstrap 4. I am not sure what about BS4 forms is making their behavior be so different.
The biggest (most important difference for me) is that when on Bootstrap 3, the form once validated and submitted, will display the green feedback back on the form itself, to inform the user the their form was successful.
However, When I run this on Bootstrap 4, not only are the validation colors different, but it redirects the browser to the 'contact.php' file, and prints out the message that should be returned back to the contact form as a green rectangle when compared to BS3.
I would really appreciate if someone can explain what might be going on between these two, and how I can fix it.
I've included screenshots and demos of the code below. I apologize in advance that the are not in JFiddle or Codeply, but because they have a dependency on 'RECAPTCHA.
I would especially appreciate if someone could change the above code to work with Bootstrap 4 and its new validation system.
I have also included links here:
BOOTSTRAP 3 Version: (WORKS!) https://bootstrapious.com/tutorial/recaptcha/
BOOTSTRAP 4 Version: (Doesn't Work the same..) https://josephromo.com
and the .php file which won't appear under developer tools:
<?php
// require ReCaptcha class
require('recaptcha-master/src/autoload.php');
// configure
$from = 'Demo contact form <demo#domain.com>';
$sendTo = 'Demo contact form <demo#domain.com>';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' =>. 'Phone', 'email' => 'Email', 'message' => 'Message'); // array variable. name => Text to appear in the email
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please try again later';
$recaptchaSecret = '6LfOUysUAAAAAGkGG_hHYN9g_BsNsPY0S9kPdwYP
';
// let's do the sending
try
{
if (!empty($_POST)) {
// validate the ReCaptcha, if something is wrong, we throw an Exception,
// i.e. code stops executing and goes to catch() block
if (!isset($_POST['g-recaptcha-response'])) {
throw new \Exception('ReCaptcha is not set.');
}
// do not forget to enter your secret key in the config above
// from https://www.google.com/recaptcha/admin
$recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret, new \ReCaptcha\RequestMethod\CurlPost());
// we validate the ReCaptcha field together with the user's IP address
$response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
if (!$response->isSuccess()) {
throw new \Exception('ReCaptcha was not validated.');
}
// everything went well, we can compose the message, as usually
$emailText = "You have new message from contact form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&. strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}

Answer 1

Ondrej here. I am the author of the https://bootstrapious.com/p/bootstrap-recaptcha tutorial.
Your main problem is that you don't have the JS scripts included correctly:
validatorjs should be validator.js (make sure it is in its location)
both contact.js and validator.js should be included after jQuery.
see console errors
This prevents both validator and contact script from running and you don't get the form's Ajax behaviour, therefore you just get redirected after the form's submission.
After making these changes, check out the browser console if no more errors show there.
Tip: to speed up the loading of the page, move all the scripts just in front of the </body> closing tag.