`
fudk_k
  • 浏览: 14670 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

bootstrapValidator动态添加校验字段

阅读更多

  $("input:checkbox").on("ifChecked", function(event){ 
        var cId = $(this).attr("name");
        addField("seqNum"+cId,"顺序必填");
        addField("discount"+cId,"折扣率必填");
    }); 
    $("input:checkbox").on("ifUnchecked", function(event){ 
        console.log($(this).attr("name"))
        var cId = $(this).attr("name");
        removeField("seqNum"+cId);
        removeField("discount"+cId);
    }); 
   
    function addField(field,notEmptyMsg){
        $(".editForm").bootstrapValidator("addField", field,{
            validators: {
                notEmpty: {
                    message: notEmptyMsg
                }
            }
        });
    }
   
    function removeField(field){
        $(".editForm").bootstrapValidator("addField", field,{});
        $(".editForm").bootstrapValidator("removeField", field)
    }

分享到:
评论

相关推荐

    bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码

    3. **新增校验字段**: 可以动态添加新的验证字段,例如在`增加校验字段`按钮的事件处理程序中,可以新增一个名为`newField`的字段并设置验证规则: ```javascript $('#btn3').click(function() { $('#inputForm')....

    BootstrapValidator-0.5.3表单验证

    同时,记得在HTML中为每个需要验证的输入字段添加`data-bv-*`属性,以便BootstrapValidator识别并应用相应的验证规则。 总的来说,BootstrapValidator-0.5.3是一个强大且灵活的表单验证工具,通过其丰富的验证规则...

    Bootstrap实现登录校验表单(带验证码)

    2. `bootstrapValidator.min.css`:这是用于表单验证的第三方库Bootstrap Validator的CSS文件,它提供了美观的验证样式。 3. `jquery-2.1.4.min.js`:jQuery库,用于简化DOM操作和事件处理。 4. `bootstrap.min.js`...

    bootstrapvalidator

    BootstrapValidator是一款基于Bootstrap框架的前端数据验证插件,它提供了丰富的验证规则和便捷的验证机制,使得在网页表单设计中能轻松实现高效且美观的数据校验。在本压缩包`bootstrapvalidator-master`中,包含了...

    Bootstrapvalidator校验、校验清除重置的实现代码(推荐)

    在BootstrapValidator中,可以通过表单元素上的`resetForm`方法来重置表单,该方法会清除所有字段的错误提示和校验状态,同时恢复字段的值到初始状态。 上述内容中提供了一段HTML代码示例,展示了如何在HTML页面中...

    BootstrapValidator不触发校验的实现代码

    需要注意的是,BootstrapValidator的验证规则需要在初始化时进行配置,通常是在文档加载完成后,通过`bootstrapValidator`方法附加到表单元素上。配置项包括各个字段的验证规则、提示信息等,例如: ```javascript ...

    bootstrapValidator bootstrap-select验证不可用的解决办法

    在本篇内容中,我们将探讨如何解决BootstrapValidator与Bootstrap-select结合时验证不可用的问题。 BootstrapValidator是一款强大的验证插件,它能够方便地对Bootstrap表单进行验证。然而,在使用Bootstrap-select...

    bootstrapvalidator-master.rar

    1. **安装与引入**:首先,你需要将BootstrapValidator的CSS和JS文件引入到你的项目中,这通常通过在HTML文件中添加链接和脚本标签实现。同时,别忘了引入Bootstrap的核心库,因为BootstrapValidator依赖于它。 2. ...

    BootStrap Validator 根据条件在JS中添加或移除校验操作

    当需要根据条件动态添加验证规则时,可以使用`bootstrapValidator("addField", field, options)`方法。假设我们有一个名为`approvalMemo`的输入字段,我们需要在特定条件下对其添加`notEmpty`验证规则,可以这样做:...

    BootStrapValidator校验方式

    在`bootstrapValidator`方法的配置对象中,你可以定义多个属性,例如`message`用于设置全局的错误提示信息,`feedbackIcons`用于定义不同验证状态下的图标样式,`fields`则用于定义每个输入字段的验证规则。...

    BootStrapValidator与My97日期校验的实例代码

    为了实现BootstrapValidator的自动校验,我们需要在用户选择日期后立即执行验证逻辑。因此,我们在开始时间的日期输入框中添加了`onpicked`事件,调用一个名为`checkPlanStartTime`的函数,将当前元素作为参数传递。...

    bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路

    当用户关闭日期选择器时,调用BootstrapValidator的`updateStatus`和`validateField`方法来重新校验日期字段。以下是具体实现的代码: ```javascript // 初始化时间选择插件 $("#companyRegisteTime").datepicker({...

    使用BootStrapValidator完成前端输入验证

    3. **Jquery验证配置**:在文档加载完成后,使用jQuery选择器找到表单,并调用`bootstrapValidator`方法进行配置。配置项包括错误消息、反馈图标等。以下是一个基本的配置示例: ```javascript $(document).ready...

    bootstrap 验证插件

    BootstrapValidator是一款基于Bootstrap框架的前端表单验证插件,它为开发者提供了强大且灵活的工具,使得在网页设计中创建符合验证规则的表单变得极其简单。BootstrapValidator提供了丰富的预定义验证规则,以及...

    BootstrapValidator验证用户名已存在(ajax)

    总之,BootstrapValidator提供了一种简单有效的方法来增强Web表单的用户体验,通过Ajax进行异步数据校验是现代Web开发中常用的一种做法。但需要注意的是,实际部署时应确保后端验证的逻辑足够健壮,避免安全风险,如...

    bootstrap校验表单js css

    BootstrapValidator是一款强大的表单验证插件,它基于前端框架Bootstrap设计,可以轻松地为你的HTML表单添加验证功能。这个插件提供了丰富的验证规则和灵活的配置选项,以确保用户输入的数据符合预设条件,从而增强...

Global site tag (gtag.js) - Google Analytics