`
zqb666kkk
  • 浏览: 733529 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

jquery validate 多个相同name的文本框验证

 
阅读更多
项目中 用到了jquery的clone方法 使得出现很多歌name一样的文本框
数据验证用的jquery validate 这样就造成只能验证第一个文本框的情况

网上看了下 各个好的解决方案 亲身实践 优化后 总结如下:
//这个代码必须要引用
 $(function(){
            if ($.validator) {
                $.validator.prototype.elements = function () {
                    var validator = this,
                            rulesCache = {};

                    // select all valid inputs inside the form (no submit or reset buttons)
                    return $(this.currentForm)
                            .find("input, select, textarea")
                            .not(":submit, :reset, :image, [disabled]")
                            .not(this.settings.ignore)
                            .filter(function () {
                                if (!this.name && validator.settings.debug && window.console) {
                                    console.error("%o has no name assigned", this);
                                }
                                //注释这行代码
                                // select only the first element for each name, and only those with rules specified
                                //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
                                //    return false;
                                //}
                                rulesCache[this.name] = true;
                                return true;
                            });
                }
            }


//下面是表单验证规则 根据自己 项目属性进行更改
            $("#formorders").validate();

            $("[name=quantity]").each(function(){
                $(this).rules("add", {
                    required: true,
                    digits:true,
                    messages: {
                        required: "数量不能为空",
                        digits:"请输入整数"
                    }
                });
            });

            $("[name=descriptionstr]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "描述不能为空"
                    }
                });
            });

            $("[name=price]").each(function(){
                $(this).rules("add", {
                    required: true,
                  // regex: "^\d+(\.\d{2})?$" ,
                    number:true,
                    messages: {
                        required: "价格不能为空",
                        number:"请输入正确的价格格式"
                    }
                });
               // $(this).rules("add", { regex: "^\d+(\.\d{2})?$" })
            });
           // $("#Textbox").rules("add", { regex: "^[a-zA-Z'.\\s]{1,40}$" })
            $.validator.addMethod(
                    "regex",
                    function(value, element, regexp) {
                        var re = new RegExp(regexp);
                        return this.optional(element) || re.test(value);
                    },
                    "数据格式错误."
            );

            $("[name=loadingPort]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "请选择起运港"
                    }
                });
            });
            $("[name=destinationPort]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "请选择目地港"
                    }
                });
            });



            $("[name=paymentMethod]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "请选择支付方式"
                    }
                });
            });

            $("[name=seller]").each(function(){
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "请选择供应商"
                    }
                });
            });

        });


然后在克隆 方法里 增加动态修改id值得方法
 $(".addProd").click(function() {
                    $("#clone").clone(true).insertAfter("#clone");

                    var idstr=0;
                    $("[name=quantity]").each(function(){
                        $(this).attr("id","quantity"+idstr);
                        idstr++;

                    });
                    var id_descriptionstr=0;
                    $("[name=descriptionstr]").each(function(){
                        $(this).attr("id","descriptionstr"+id_descriptionstr);
                        id_descriptionstr++;

                    });
                    var id_price=0;
                    $("[name=price]").each(function(){
                        $(this).attr("id","price"+id_price);
                        id_price++;

                    });
                    
                })


按钮用   <button class="btn btn-primary btn-lg mr-40" type="submit"  id="submitBtn">创建订单</button>这种

文本框 随意 比如: <input   name="quantity" value="" maxlength="9" class="form-control input65" type="text">

引用
  <script type="text/javascript" src="/static/lib/jquery/core/1.9.1/jquery.min.js"></script>

    <script type="text/javascript" src="common/js/plugin/validate/jquery.validate.js"></script>
这两个js即可
0
0
分享到:
评论

相关推荐

    jquery validate 支持验证name重复的表单

    在项目中经常遇到,表单...如果用jquery validator ,它只支持验证第一个input,后面的name相同的input不会被验证,怎么办呐?经过研究源码,提出了解决办法。 基于jQuery Validation Plugin - v1.14.0 - 6/30/2015改造

    jquery validate添加自定义验证规则(验证邮箱 邮政编码)

    jQuery Validate插件是一个非常流行的前端JavaScript库,用于在客户端进行表单验证。它为开发者提供了简单易用的方法来确保用户输入的数据符合特定的规则,并且提供了大量的内置验证方法。但是,在实际应用中,我们...

    文本框设置默认值和验证提交

    3. 使用库和框架:像jQuery Validation Plugin或React的Formik库可以帮助我们更轻松地处理验证。 4. 后端验证:尽管前端验证提高了用户体验,但后端验证同样必不可少,因为前端验证可以被绕过。在服务器端,可以...

    jQuery Validate插件ajax方式验证输入值的实例

    当用户输入值后,jQuery Validate会自动将该值附加到URL后面,然后发起一个GET请求进行验证。 然而,实际的后端接口可能需要更复杂的处理,比如POST请求、额外的参数等。这时,我们可以自定义`remote`规则的配置: ...

    jQuery formvalidate实现输入不正确时文本框抖动效果

    总结来说,通过使用jQuery的formvalidate插件和自定义的JavaScript与CSS,我们可以创建一个具有视觉反馈的表单验证系统。当用户输入不符合规则时,对应的文本框会以抖动的方式提醒用户。这种方法提高了用户界面的...

    jquery验证表单

    例如,验证一个必填的文本框可以这样写: ```javascript if ($('#username').val().trim() === '') { alert('用户名不能为空'); return false; // 验证失败,阻止表单提交 } ``` 4. **自定义验证规则**:...

    jQuery表单个人信息格式验证代码.zip

    另一个JavaScript文件可能名为`validate.js`或类似,里面编写了实现表单验证的逻辑。在jQuery中,我们可以使用`$(document).ready()`函数来确保在页面加载完成后执行相关的代码。例如,我们可以监听表单的提交事件(`...

    jquery会员yanz.zip

    总结,jQuery结合SCSS为我们提供了高效、灵活的文本框验证和错误提示机制,使得在会员系统中实现用户输入验证变得轻松而直观。通过自定义函数、插件集成和AJAX技术,我们可以构建出强大且用户体验优秀的Web应用。

    jQuery EasyUI API 中文文档 - ValidateBox验证框

    例如,`destroy()` 方法用于移除并销毁组件,`validate()` 方法会检查文本框内容的有效性,而 `isValid()` 方法则返回验证结果,返回 `true` 表示验证成功,`false` 表示验证失败。 综上所述,jQuery EasyUI 的 ...

    Aspnet 中Jquery应用经典例子

    8. **插件集成**:jQuery生态系统中有大量优秀的插件,如Bootstrap的弹出框、轮播图,以及validate表单验证等。这些插件可轻松集成到Asp.net项目中,提升网页功能和设计。 五、响应式与移动支持 9. **响应式设计**...

    jQuery权威指南-源代码

    7.2 验证插件validate /198 7.3 表单插件form /202 7.4 Cookie插件cookie /205 7.5 搜索插件AutoComplete /209 7.6 图片灯箱插件notesforlightbox /213 7.7 右键菜单插件contextmenu /216 7.8 图片放大镜插件...

    easyui验证框使用方法

    其中,验证框(ValidateBox)是EasyUI中用于输入验证的一个强大工具,能够帮助开发者实现对用户输入的有效性检查。本文将详细阐述如何使用EasyUI中的验证框来完成不同类型的输入验证。 #### 二、基本属性介绍 在...

    jquery实现ajax提交表单信息的简单方法(推荐)

    在上述内容中,通过jQuery遍历表单内部的文本框、隐藏域、文本区域和选中的单选按钮,获取这些表单元素的名称(name)和值(value),并使用这些数据构成一个对象(postvals)。然后,根据配置的自定义参数...

    jQuery学习笔记

    3. 表单验证:jQuery插件如validate.js可用于实现复杂的表单验证。 六、jQuery实用技巧 1. `$(document).ready(function() {...})`:页面加载完成后执行的代码。 2. `$(":input")`: 选择所有输入元素,包括文本框...

    jquery培训文档

    ### jQuery培训文档知识点详解 #### Accordion(可折叠标签) **Accordion** 是一种常见的界面元素...**Tabs** 组件用于创建一个多标签页的容器。 ##### 实例 ```html &lt;textarea name="ta" style="width:100%;...

    最新jquery+easyui_api培训文档

    **Accordion** 是一个功能组件,允许用户在有限的空间内展示更多的内容。它通过动态地展开或收起内容区域来帮助优化网页布局。 ##### 实例 下面提供了一个简单的示例,展示了如何创建一个Accordion: ```html ;...

    html常用小模块

    同时,我们还需要编写JavaScript函数`validateForm()`来进行更复杂的逻辑验证,例如检查用户名是否已被占用,这通常涉及与服务器的交互。 以上就是关于“HTML实现级联菜单”和“HTML中实现注册时文本框的验证”的...

    表单验证:一种简单的表单进行验证,仅在满足某些条件时有效

    在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期,...在实际项目中,还可以考虑使用库或框架,如jQuery Validate、React的Formik或Vue的Vuelidate,它们能进一步简化和增强表单验证的实现。

    [其他类别]网页中文本框自校验的标签_input.zip

    这段代码监听`email`文本框的输入事件,当用户输入时,向`validateEmail.jsp`发送一个包含邮箱值的POST请求。服务器处理请求后返回“invalid”或空字符串,前端根据响应更新错误提示。 总结起来,网页中文本框的自...

    form-validation

    例如,你可以使用jQuery Validate插件来创建自定义验证规则和错误消息: ```javascript $("#myForm").validate({ rules: { username: { required: true, minlength: 2 }, password: { required: true, ...

Global site tag (gtag.js) - Google Analytics