Bootstrap 3和4表单验证之间的不同行为？

Question

我在表单上使用 Bootstrap 表单验证库时遇到问题。出于某种原因，这在 Bootstrap 3 上非常有效，但在 Bootstrap 4 上却不行。我不确定 BS4 表单如何使它们的行为如此不同。

最大的（对我来说最重要的区别）是，在 Bootstrap 3 上，表单一旦验证并提交，就会在表单本身上显示绿色反馈，以通知用户他们的表单成功。

但是，当我在 Bootstrap 4 上运行它时，不仅验证颜色不同，而且它会将浏览器重定向到“contact.php”文件，并打印出应该返回到联系表单的消息与 BS3 相比，绿色矩形。

如果有人能解释这两者之间可能发生的事情，以及我如何解决它，我将不胜感激。

我在下面提供了代码的屏幕截图和演示。我提前道歉，它们不在 JFiddle 或 Codeply 中，而是因为它们依赖于 'RECAPTCHA.

如果有人可以更改上述代码以使用 Bootstrap 4 及其新的验证系统，我将特别感激。

我还在这里添加了链接：

BOOTSTRAP 3 版本：（工作！）https://bootstrapious.com/tutorial/recaptcha/

BOOTSTRAP 4 版本：（工作不一样..）https://josephromo.com

以及不会出现在开发者工具下的.php文件：

        <?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

这里是翁德瑞。我是https://bootstrapious.com/p/bootstrap-recaptcha 教程的作者。

您的主要问题是您没有正确包含 JS 脚本：

1. validatorjs 应该是 validator.js（确保它在它的位置）
2. contact.js 和 validator.js 都应该包含在 jQuery 之后。

see console errors

这会阻止验证器和联系脚本运行，并且您不会获得表单的 Ajax 行为，因此您只会在表单提交后被重定向。

进行这些更改后，请检查浏览器控制台是否不再显示错误。

提示：要加快页面加载速度，请将所有脚本移动到 </body> 结束标记之前。