如何解决 slick 中的表单验证问题

Question

我在 bootstrap 模态中使用 slick 滑块，其中我在每个 slick 中显示输入字段，但是当我验证它时总是显示空字段，即使所有字段都已填充，我看到问题是当我按下一个箭头按钮时of 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> 以便滑块只有一个项目，它开始测试为“有效”。

Answer 1

问题是 slick slider 默认尝试无限滚动。为此，它必须克隆滑块项目的另一个副本，以便在世界范围内滑动时准备好移动到位（从最后一个向前或从第一个向后移动）。滑块项的克隆副本包含另一个 <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 个），然后单击“测试”按钮，测试结果为“有效”。

如何解决 slick 中的表单验证问题

How to solve form validation problem in slick

javascript

html

jquery

slick.js