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

Question

我在同一页面上使用表格两次。

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>

它可以正常使用一种形式但是当我再次添加相同的形式时它会停止工作。第二种形式开始显示错误弹出警报，但即使我在表单字段中输入文本。

JS代码

function checkwebform()
    {
    var codecheck = jQuery('#codetext').val();
    if(codecheck.length != 5)
    {
        alert('Invalid Entry');
    } else {
        showhidediv('div-info');
    }
    return false;
}

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

Answer 1

正如我评论的那样，你不能拥有多个具有相同id的元素。它违反HTML规范，jQuery id选择器只返回第一个（即使你有多个）。

好像你正在使用jQuery，我可能会建议另一种方法来实现你的目标。

首先，摆脱codetext id。然后，您可以使用{{3}指定使用jQuery的事件处理程序，而不是使用inline events（它们被认为是不良做法，如MDN文档中所指出的那样）方法。

然后，在回调函数中，您可以使用$(this)引用表单本身，并使用.on()方法查找名为codetext的子项。

并且，如果您致电find()，则取消表单提交。

我的建议：

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>

<强> JS：

$(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

 });


});

工作演示： e.preventDefault()

Answer 2

问题是，您将拥有多个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>

你的JS：

$(document).ready(function(){
    $('form').submit(function(){
        var codecheck = $(this).find('input[name=codetext]').val();
        if(codecheck.length != 5)
        {
            alert('Invalid Entry');
        } else {
            showhidediv('div-info');
        }
        return false;   
    })
    })