需求:

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. LEMP--如何在Ubuntu上安装Linux、Nginx、MySQL和PHP

    简介 LEMP是用来搭建动态网站的一组软件,首字母缩写分别表示Linux.Nginx(Engine-X).MySQL和PHP. 本文将讲述如何在Ubuntu安装LEMP套件.当然,首先要安装Ubunt ...

  2. 2019-9-2-给博客添加rss订阅

    title author date CreateTime categories 给博客添加rss订阅 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 17:23 ...

  3. SVN 树冲突解决详解

    https://blog.csdn.net/xgf415/article/details/75196714 SVN 冲突包括 内容冲突:当两名(或更多)开发人员修改了同一个文件中相邻或相同的行时就会发 ...

  4. 设置html各元素不可点击(持续更新)

    1.span <span id="nextStep" onclick="right">下一页</span> $("#nextS ...

  5. java 综合示例代码

    package javaenhance.src.cn.itcast.day3; import java.lang.reflect.Constructor; import java.lang.refle ...

  6. jquery 选择多级父子元素

    <div class="box"> <div class="item"> <div class="out"&g ...

  7. jquery自己写的幻灯片插件,好用不解释

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Linux 内核

    在接口总线领域的最新的一项是外部总线的整个类. 这包括 USB, 固件, 和 IEEE1284(基 于并口的外部总线). 这些接口有些类似于老的非外部的技术, 例如 PCMCIA/CardBus 和 ...

  9. 【58.75%】【BZOJ 1087】[SCOI2005]互不侵犯King

    Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 3040  Solved: 1786 [Submit][Status][Discuss] Descri ...

  10. vue-learning:17- js - methods

    methods 函数是十分优雅的语言特性,它让我们可以采用可复用的方式存储一段逻辑,从而不用重复代码就可以在多处调用.函数.组件.模块等都有复用代码的考虑,函数应该是最早组织复用代码的实现. 在vue ...