Question

我在JS滑块内有一个联系表单，由Slick提供支持。联系表单分布在两个页面上，JS滑块用于翻页。在填写表格并推送发送后，contact.php表示我需要输入我的名字，尽管已经这样做了。但是，当我删除JS滑块脚本时，验证功能正常，并在填写输入框后，表单在推送发送后作为电子邮件发送。因此我得出结论，Slick在某种程度上干扰了我的PHP验证，我不知道为什么。请指教。

HTML：

＆＃13;

$(document).ready(function(){    
        
    $('.single-item').slick();
        
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<form action="nominate.php" method="post">

  <div class="single-item slider">
    <div class="page1">
      <label class="row">
        <h2 class="headline">Your full name</h2>
        <input type="text" name="yourname" placeholder="Forename and surname"></input>
      </label>

      <label class="row email">
        <h2 class="headline">Your email address <p>Don't worry, we won't spam you or share your email address</p></h2>
        <input type="text" name="email" placeholder="example@rofordaward.co.uk"></input>

      </label>

      <label class="row">
        <h2 class="headline">Name of company</h2>
        <input type="text" name="companyname" placeholder="e.g. Roford"></input>
      </label>
    </div>

    <div class="page2">
      <label class="row reason">
        <h2 class="headline">Reason for nomination</h2>
        <textarea id="textarea" rows="6" cols="25" maxlength="1000" name="reason" placeholder="A brief evidence based summary"></textarea>
        <div id="text-area-wrap">
          <div id="textarea_feedback"></div>
        </div>
      </label>

      <div class="row button-wrap">
        <div class="column small-12">
          <input class="button" type="submit" value="Send it!">
        </div>
      </div>

    </div>

  </div>

</form>

＆＃13;

用于邮寄和验证的PHP

<?php
/* Set e-mail recipient */
$myemail  = "example@gmail.com";

/* Check all form inputs using check_input function */
$yourname = check_input($_POST['yourname'], "Enter your name");
$email    = check_input($_POST['email'], "Enter your email");
$companyname    = check_input($_POST['companyname'], "Enter a company name");
$reason = check_input($_POST['reason'], "Write your reason");

/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email))
{
    show_error("E-mail address not valid");
}

/*Message for the e-mail */
$message = "New submission

Name: $yourname
E-mail: $email
Company name: $companyname

Reason:
$reason

End of message
";

/* Send the message using mail() function */
mail($myemail, $subject, $message);

/* Redirect visitor to the thank you page */
header('Location: thanks.htm');
exit();

/* Functions we used */
function check_input($data, $problem='')
{
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    if ($problem && strlen($data) == 0)
    {
        show_error($problem);
    }
    return $data;
}

function show_error($myError)
{
?>
    <html>
    <body>

    <b>Please correct the following error:</b><br />
    <?php echo $myError; ?>

    </body>
    </html>
<?php
exit();
}
?>

Answer 1

问题在于旋转木马是如何工作的 - 他们克隆了一些幻灯片（通常是第一张，有时是最后一张）来重新定位它们以给你带来循环效果。

这里发生的事情是，当第一张幻灯片重复时，第一张幻灯片上的输入也会重复。

这意味着当您提交表单时，它会通过（假设在我的示例中，field1是第一张幻灯片上的输入而field2是第二张），如下所示：

[
    'field1' => 'value',
    'field2' => 'value',
    'field1' => ''
]

在服务器端显然你不能定义两次这样的值，所以后一个定义接管第一个，所以你最终得到

[
    'field2' => 'value',
    'field1' => ''
]

导致验证错误。

这不是您可能使用此轮播解决的问题。

Answer 2

您好，欢迎来到stackoverflow社区。

由于您的check_input()函数基本上只是在编码后检查给定字符串是否为空，并且验证失败，可能根本就没有提交该名称。

我的猜测是，由于某种原因，第一个光滑页面上的表单元素没有被提交。

您只看到名称字段无法验证，因为它是您实际检查的第一个字段，因此永远不会检查任何其他失败字段。

要确认这一点，只需注释

行

$yourname = check_input($_POST['yourname'], "Enter your name");

并查看电子邮件验证是否失败。

您可以使用var_dump($_POST)查看POST请求中提交的两个版本的数据。

为什么我的JS滑块（Slick）会干扰我的联系表单上的PHP验证？

2 个答案: