如何解决如何解决圆滑的表单验证问题
我在引导模式中使用光滑滑块,在其中显示每个光滑的输入字段,但是当我验证它时,即使所有字段都已填充,它始终显示空字段,我看到当我按下光滑的下一个箭头按钮时,它首先显示为空的问题输入然后立即用我之前输入的内容填充它,如何解决这个问题
这是该问题的极简再现。
$(() => {
$(".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>
以便滑块只有一项,它开始测试为“有效”。
解决方法
问题是默认情况下,光滑的滑块会尝试无限滚动。要做到这一点,它必须克隆滑块项目的另一个副本,以便在世界各地滑动时准备好移动到位(从最后到第一个或从第一个到最后一个向后)。滑块项的克隆副本包含另一个 true
元素,该元素仍然为空,因此表单无效。
看起来最简单的解决方法是通过添加将无限滚动设置为 false
package-lock.json
到光滑的配置对象。
<input required ...
infinite: false
如果您在两个输入框中输入文本(每个滑块项 1 个),然后单击“测试”按钮,则测试结果为“有效”。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。