Question

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

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

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

如果有人可以解释这两者之间可能会发生什么，以及我如何解决它，我真的很感激。

我已经包含了以下代码的屏幕截图和演示。我提前道歉，不是在JFiddle或Codeply，而是因为他们依赖于＆＃39; 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

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

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

validatorjs应该是validator.js（确保它位于其位置）
jQuery之后应包含contact.js和validator.js。

see console errors

这可以防止验证程序和联系人脚本运行，并且您无法获得表单的Ajax行为，因此您只需在表单提交后重定向即可。

进行这些更改后，如果没有显示更多错误，请查看浏览器控制台。

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

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

1 个答案: