时间戳

首页 > 解决方案 > 如何在 slick 中解决表单验证问题

javascript - 如何在 slick 中解决表单验证问题

问题描述

我在引导模式中使用光滑滑块，我在每个光滑中显示输入字段，但是当我验证它总是显示空字段，即使所有字段都已填充，我看到当我按下光滑的下一个箭头按钮时它首先显示空输入然后立即显示的问题用我之前输入的内容填充它，如何解决这个问题

这是该问题的极简再现。

$(() => {
  $(".slick-products").slick({
    dots: true
  });
});

function test() {
  const result = $("form")[0].checkValidity()
    ? 'valid'
    : 'invalid';
  $('#output').html('');
  setTimeout(() => {
    $('#output').html(result);
  }, 500);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test</title>
  </head>
  <body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript" charset="utf-8"></script>

    <form>
      <div class="slick-products">
        <div>
          <input type="text" required />
        </div>
        <div><input type="text" required /></div>
      </div>
    </form>
    <button type="button" onclick="test()">Test</button><br/>
    Test result: <span id="output"></span>
  </body>
</html>

在输入框中输入一些文本，然后按测试按钮。我希望它测试为“有效”，但我看到“无效”，即使已设置了唯一必需的输入。

如果我删除第二个<div><input type="text" required /></div>，使滑块只有一个项目，它开始测试为“有效”。

标签： javascripthtmljqueryslick.js

解决方案

问题是光滑的滑块默认尝试进行无限滚动。为此，它必须克隆滑块项目的另一个副本，以便在世界范围内滑动时准备好移动到位（从最后一个到第一个或从第一个到最后一个向后）。滑块项的克隆副本包含另一个<input required ...仍然为空的元素，因此表单无效。

看起来最简单的解决方法是通过添加将无限滚动设置为 false

infinite: false

到光滑的配置对象。

$(() => {
  $(".slick-products").slick({
    dots: true,
    infinite: false
  });
});

function test() {
  const result = $("form")[0].checkValidity()
    ? 'valid'
    : 'invalid';
  $('#output').html('');
  setTimeout(() => {
    $('#output').html(result);
  }, 500);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test</title>
  </head>
  <body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript" charset="utf-8"></script>

    <form>
      <div class="slick-products">
        <div>
          <input type="text" required />
        </div>
        <div>
          <input type="text" required />
        </div>
      </div>
    </form>
    <button type="button" onclick="test()">Test</button><br/>
    Test result: <span id="output"></span>
  </body>
</html>

如果您在两个输入框中输入文本（每个滑块项 1 个），然后单击“测试”按钮，它将测试为“有效”。

推荐阅读