Rails 将 Campo 的 markdown 编辑器换成 simditor ,jquery.validate 没办法验证输入框

tiseheaini · 2014年08月19日 · 最后由 perish 回复于 2014年12月22日 · 2898 次阅读

将 markdown 编辑器换成 simditor ,jquery.validate 可以检测 comment[body] 不为空,并且能正确给出 不能为空字符 的提示,可当我在输入框中继续输入内容后,错误消息没有正确消失,在 mrakdown 编辑器中没有出现这个问题 看了 jquery.validate 源码,小弟太挫,看不懂原理 在 validator.js.coffee 文件里打 console.log 输出,貌似是 unhighlight 没有执行。

highlight: (element) ->
  console.log "highlight puts"
  $(element).closest(".form-group").addClass "has-error"

unhighlight: (element) ->
  console.log "unhighlight puts"
  $(element).closest(".form-group").removeClass "has-error"

在源码里也找不到哪里在运行了这段逻辑,请大家帮忙看一下。 我 fork 的项目地址
https://github.com/tiseheaini/campo rm-markdown 分支 github issue 地址 https://github.com/chloerei/campo/issues/39

不是这里设置,而是你要用在另外一个配置里处理 valid 的情况。

errorPlacement 即使是 valid,也会被调用,但是同时也会调用 success,所以我在 valid 的情况下,给 DOM 加上一个 class,用于隐藏错误显示。

1、HTML

<div class="control-wrapper">
  <input name="name" />
  <p class="prompt"><span class="error-icon"></span>这里是错误信息</p>
</div>

2、jQuery.validate 部分配置

success: "valid",
errorElement: 'p',
errorPlacement: function(label, element) {
  label.removeClass("error");
  label.addClass("prompt");
  label.addClass("error");
  label.prepend('<span class="error-icon"></span>');
  $(element).siblings(".prompt").replaceWith(label);
}

当 valid 的情况是,CSS 里面我会更换字体的样色并且隐藏 span.error-icon

<p class="prompt valid"><span class="error-icon"></span></p>

给你个建议就是好好看文档,在这里我遇到过许多人都是因为没好好看文档而一直在瞎折腾!

https://github.com/chloerei/campo/blob/master/vendor/assets/javascripts/jquery.validate.js#L231

应该是要 foucs 才会检查,所以手动触发吧...

v = $('#new_comment').data('validator');
editor.on 'valuechanged', (e, src) ->
  elem = e.target
  v.checkForm() && v.addWrapper(v.errorsFor(elem)).hide() && v.settings.unhighlight(elem)

没怎么用过 jquery.validate,临时看的代码,仅供参考 ...(:зゝ∠) PS: 如果更新了插件的话,v.addWrapper 那里要改一下,rei 用的旧版本

#1 楼 @hz_qiuyuanxin #2 楼 @saiga 谢谢两位的回答,等忙完工作我尝试一下

我用的 bootstrapvalidator+simditor,但是不知道如何显示错误信息?请问楼主解决了吗?

#4 楼 @perish 翻看了一下源代码,有些复杂,对于后端专业的我有点难度。

#5 楼 @tiseheaini 最后用什么方法达到了同样效果?

#6 楼 @perish 最后自己写了 js 去判断

需要 登录 后方可回复, 如果你还没有账号请 注册新账号