Javascript 具有相同功能的多表单验证

我在同一页上使用了两次表单

HTML代码

<form action="post.php" method="POST" onsubmit="return checkwebform();">

<input id="codetext" maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" /> 

<input class="button" type="submit" value="SUMBIT" />
</form>

---

如何使用相同的功能验证页面上的其他表单

问题，您将有多个id

codetext

。 您需要这样更改代码：

<form action="post.php" method="POST">

<input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" /> 

<input class="button" type="submit" value="SUMBIT" />
</form>
<form action="post.php" method="POST">

<input  maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" /> 

<input class="button" type="submit" value="SUMBIT" />
</form>

---

正如我所评论的，不能有多个元素具有相同的

id

。这违反了HTML规范，jQuery id选择器只返回第一个（即使有多个）

如果您正在使用jQuery，我可能会建议另一种方法来实现您的目标

首先，去掉

codetext

id

。然后，您可以使用以下方法使用jQuery指定事件处理程序，而不是像您那样使用（如MDN文档中所指出的，它们被认为是不良做法）

然后，在回调函数中，您可以使用

$（this）

引用表单本身，并使用该方法查找名为

codetext

的子级

而且，如果您打电话，您将取消表单提交

我的建议是：

HTML表单（可以重复任意时间）：

<form action="post.php" method="POST">
  <input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" /> 
  <input class="button" type="submit" value="SUMBIT" />
</form>

$(document).ready(function() {

 //this way, you can create your forms dynamically (don't know if it's the case)    
 $(document).on("submit", "form", function(e) {

    //find the input element of this form with name 'codetext'
    var inputCodeText = $(this).find("input[name='codetext']");

    if(inputCodeText.val().length != 5) {
        alert('Invalid Entry');
        e.preventDefault(); //cancel the default behavior (form submit)
        return; //exit the function
    } 

    //when reaches here, that's because all validation is fine
    showhidediv('div-info');

    //the form will be submited here, but if you don't want this never, just move e.preventDefault() from outside that condition to here; return false will do the trick, too

 });


});

---

工作演示：您能用这两种表单发布html吗？同一文档中不能有具有相同

id

的元素。也许您正在调用

jQuery（'#codetext'）

并获取第一个。@mrlew完全正确！第二个和第三个表单也有相同的id，因为我想使用相同的html。每个表单都应该使用相同的函数进行验证。这是解决这个问题的完美方法。我使用的是相同的html，所有表单现在都可以验证：）

<form action="post.php" method="POST">
  <input maxlength="5" name="codetext" type="text" value="" placeholder="Enter here" /> 
  <input class="button" type="submit" value="SUMBIT" />
</form>

$(document).ready(function() {

 //this way, you can create your forms dynamically (don't know if it's the case)    
 $(document).on("submit", "form", function(e) {

    //find the input element of this form with name 'codetext'
    var inputCodeText = $(this).find("input[name='codetext']");

    if(inputCodeText.val().length != 5) {
        alert('Invalid Entry');
        e.preventDefault(); //cancel the default behavior (form submit)
        return; //exit the function
    } 

    //when reaches here, that's because all validation is fine
    showhidediv('div-info');

    //the form will be submited here, but if you don't want this never, just move e.preventDefault() from outside that condition to here; return false will do the trick, too

 });


});