需求:

form表单输入中有坐标,坐标可以输入也可以从地图中获取,验证插件使用的是 bootstrapValidator

问题:

当输入错误的值时会触发验证,有错误提示。当在地图上选择坐标,通过js修改文本值后错误验证依然存在,如下图所示:

手输后:

选取坐标点后:

解决办法:

因为 bootstrapValidator 默认触发验证的事件是 keyup,所以需要在验证的字段下手动加入该事件,用于手动触发验证。代码如下:

      longitude:{
group: '.col-sm-4',
trigger:"keyup",
validators: {
numeric: {message: '只能为数字'},
}
}

然后在赋值的时候触发该事件即可,代码如下:

 $("#longitudeId").val(evt.coordinate[0])
$("#latitudeId").val(evt.coordinate[1])
setTimeout(function(){
$("#longitudeId").keyup();
$("#latitudeId").keyup();
},10)

PS:

不知为什么,因为赋值后直接触发事件没有效果,所以加了一个setTimeout 延迟事件的触发。

bootstrapValidator JS修改内容无法验证的更多相关文章

  1. bootstrapValidator.js 做表单验证

    有这样的一个场景,我们在提交form表单的时候 可能要做一些验证,比如判断是不是为空,电话的格式验证,邮箱的格式验证等等,手写起来也是可以得. 但是今天我介绍一个bootstrap插件简化开发.就是b ...

  2. [转]bootstrapValidator.js 做表单验证

    本文转自:https://www.cnblogs.com/nele/p/5493414.html 作者:@nele本文为作者原创,转载请注明出处:https://www.cnblogs.com/nel ...

  3. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  4. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  5. 通过 js 修改 html 的文本内容或者样式

    通过 js 修改 html 的文本内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】

    一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在 ...

  7. {{angular.js 使用技巧}} - 基于验证框架的扩展(w5cValidator)

    开场白: angular.js 是谷歌出的前端js MV*框架,我也是今年做 worktile 的时候才开始接触的,起初技术选型的时候还准备使用 backbone(毕竟很多大公司在使用他,而且也是比较 ...

  8. 使用BootStrapValidator来完成前端输入验证

    BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起.下面直接上图,看看完成后的结果: ...

  9. 改进:js修改iOS微信浏览器的title

    问题简介 前端入门没多久,可能连入门也不算,最近网上流行各自书籍改名,什么<前端开发,从入门到放弃>,<Android开发,从入门到改行>之类的,程序员真是个爱自嘲的群体,但我 ...

随机推荐

  1. TabHost选项卡的实现(二):使用Fragment实现

    在上一篇博客<TabHost选项卡的实现(一):使用TabActivity实现>中,讲解了如何使用TabActivity创建管理选项卡,但是,通过TabActivity创建选项卡的方式已经 ...

  2. Python--day48--面向对象回顾

    面向对象回顾: 例1: 例2: 特殊方法(要背会):

  3. 安装ssh-batch工具

    关于sshbatch sshbatch是用perl写了非常方便操作管理集群的一个工具,项目的源码在GitHub托管. 关于sshbatch以及其详细的使用方法,春哥在GitHub上介绍的非常详细了,详 ...

  4. UVA 12563 "Jin Ge Jin Qu hao" (背包)

    传送门 debug了好一会,突然发现,输出错了,emmm......... 明天再写debug历程: (PS:ipad debug是真的繁琐) 题意: 题解: 尽管题干中给的 t 的范围很大,但是 t ...

  5. Intellij IDEA 如何使用Jrebel热部署

    My Jrebel 已经不再提供免费使用了,或使用破解版Jrebel 或可以移步至 HotSwapAgent,或使用破解的Jrebel. 一个java web项目,在写的过程中我们需要不断调试,如果没 ...

  6. element ui 批量删除

    <el-table :data="tableData" stripe border style="width: 100%" @selection-chan ...

  7. MySQL面试(二)

    1.为什么索引遵循最左匹配原则? 当B+树的数据项是符合的数据结构,比如(name,age,sex)的时候,B+树是按照从左到右的顺序建立搜索树的.比如当(张三,20,F)这样的数据来检索的时候,b+ ...

  8. 性能测试基础-开门篇3(LR常用函数介绍)

    LR常用的函数,协议不一样函数会不一样,这里简单的介绍下HTTP\WEBSERVICE\SOCKET协议常用函数: HTTP: web_set_max_html_param_len("102 ...

  9. vue的路由带参数和取参数,watch路由监听

    1.写在html里 <router-link :to="{path:'/goldShop/goodsInfo',query: { id:item.id }}" class=& ...

  10. 2019-4-29-C#-从-short-转-byte-方法

    title author date CreateTime categories C# 从 short 转 byte 方法 lindexi 2019-4-29 12:8:39 +0800 2019-01 ...