错误:Jquery 表单验证插件在 Firefox 中的每个字段中附加重复的错误消息

发布于 2024-12-10 22:43:55 字数 2030 浏览 0 评论 0原文

在我的表单中,我使用 jquery 表单验证插件 来验证表单。但问题是错误消息在每个字段下方多次显示。正如您在下面的屏幕截图中看到的那样。 这在 Chrome 中可以正常工作,但在 Firefox 中则不行。

在此处输入图像描述

我发现当我使用字段 name="id" 时发生此错误

<input name="id" class=""/>

我正在使用以下代码

$('document').ready(function(){
$("#form").validate({

    rules : {
        "id":{
            required:true,
            digits:true
        },

        "user_login":{
            required:true
        },

        "user_pass":{
            required:true
        }
        },
   messages: {
        "id":{
            required: "This field is required"
        },

        "user_login":{
            required: "This field is required"
        },

        "user_pass":{
            required: "This field is required"
        }
        },
   submitHandler: function(form){
        var formData = $('#form').serialize();
            $('#form').unbind("submit"); // fix for IE
            $.ajax({
                url: "",
                data:formData,
                type:"POST",
                error: function(error){
                },
                success: function(data) {
                }
            });
        return false;
      });
});

如何避免为每个字段附加多个错误消息。

编辑:我的 HTML 代码是

<form id="form" name="" method="POST" action="">
<ul class="formstyle">
    <li>
        <label>Id</label>
        <input type="text" name="id" class="" />
    </li>
    <li>
        <label>User Login</label>
        <input type="text" name="user_login" class="" />
    </li>
    <li>
        <label>User Pass</label>
        <input type="text" name="user_pass" class="" />
    </li>    
    <li>
            <input type="submit"/>
    </li>
</ul>
</form>

In my form I am using jquery form validate plugin to validate a form. But the problem is that error messages are displaying multiple times below every field. As you see on the screen shot below.
This is working correctly in Chrome, but not in Firefox.

enter image description here.

I found this error is occurring when I am using field name="id"

<input name="id" class=""/>

The following code I am using

$('document').ready(function(){
$("#form").validate({

    rules : {
        "id":{
            required:true,
            digits:true
        },

        "user_login":{
            required:true
        },

        "user_pass":{
            required:true
        }
        },
   messages: {
        "id":{
            required: "This field is required"
        },

        "user_login":{
            required: "This field is required"
        },

        "user_pass":{
            required: "This field is required"
        }
        },
   submitHandler: function(form){
        var formData = $('#form').serialize();
            $('#form').unbind("submit"); // fix for IE
            $.ajax({
                url: "",
                data:formData,
                type:"POST",
                error: function(error){
                },
                success: function(data) {
                }
            });
        return false;
      });
});

How can I avoid appending multiple error messages per field.

Edit: My HTML code is

<form id="form" name="" method="POST" action="">
<ul class="formstyle">
    <li>
        <label>Id</label>
        <input type="text" name="id" class="" />
    </li>
    <li>
        <label>User Login</label>
        <input type="text" name="user_login" class="" />
    </li>
    <li>
        <label>User Pass</label>
        <input type="text" name="user_pass" class="" />
    </li>    
    <li>
            <input type="submit"/>
    </li>
</ul>
</form>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

冷血 2024-12-17 22:43:55

当在表格标签内使用表单时,可能会发生同样的问题,如下所示:

<table width="600">
<form id="form" name="" method="POST" action="">
... (rest of the table elements)
</form>
</table>

要解决此问题,您需要在表单标签内提供表格标签,如下所示:

<form id="form" name="" method="POST" action="">
<table width="600">
... (rest of the table elements)
</table>
</form>

希望这会有所帮助。

The same issue can happen when using a form inside a table tag like the one below:

<table width="600">
<form id="form" name="" method="POST" action="">
... (rest of the table elements)
</form>
</table>

To fix the issue, you need to give the table tag inside the form tags, like below:

<form id="form" name="" method="POST" action="">
<table width="600">
... (rest of the table elements)
</table>
</form>

Hope this helps.

风情万种。 2024-12-17 22:43:55

我已经完成了这个工作。

Problem is with jQuery version.

我正在使用 jQuery 版本:v1.4.3(不工作)

jQuery 版本验证插件正在使用:v1.6.4(工作)

I got this done working.

Problem is with jQuery version.

I am using jQuery version: v1.4.3 (not working)

The jQuery version validation plug in working with: v1.6.4 (working)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文