gpt4 book ai didi

javascript - 验证在 HTML 中不起作用

转载 作者:行者123 更新时间:2023-11-28 05:50:09 25 4
gpt4 key购买 nike

我有 3 个部分,每个部分都有一些需要验证的输入文件。如果我单击提交按钮需要验证不起作用,第 1 部分进入第 2 部分,第 3 部分相同而无需验证。请帮我解决这个问题。

<!doctype html>
<html>
<head>

<style>
.m-div {display: none;}

.m-div.current {
display: block;
}
</style>
</head>
<body>

<form action="" method="post">

<section class="m-div current" id="one" >
<input type="checkbox" name="bklet" required/>
<label for="bklet"> check it</label>
</section>


<section class="m-div" id="two">
<label> First Name</label>
<input type="text" name="Fname" pattern=".{3,}" title="3 characters minimum" class="input width-full" required>

<label> Last Name</label>
<input type="text" name="Lname" pattern=".{3,}" title="3 characters minimum" class="input width-full" required>
</section>



<section class="m-div" id="three">
<label> Your Message</label>
<textarea class="textarea width-full" name="message" required></textarea>
</section>

<input type="submit" onclick="next();">

</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function next() {
var current = $('.current');
var next = current.next('.m-div:first');

// loop back to the first div
// if(next.length == 0) { next = $('#one'); }

current.removeClass('current');
next.addClass('current');
}
</script>

</body>
</html>

最佳答案

您应用于表单字段的验证属性只是对 Web 浏览器的提示。每个浏览器可能会以不同于其他浏览器的方式显示或处理此类验证。

有关更多信息,我建议查看有关 HTML 表单验证主题的教程,例如:http://www.the-art-of-web.com/html/html5-form-validation/

同样重要的是要注意,无论这些验证如何,表单数据仍然可以提交。您正在使用的验证不会确保提交的数据存在或有效。想要提交无效数据的人可以轻松绕过它们。因此,您也必须__在服务器端验证提交的字段!

关于javascript - 验证在 HTML 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37381811/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com