summernote富文本编辑器和jquery.validate冲突报错的解决方案

news2024/7/6 18:50:12

先看问题:
当我在富文本输入并移出鼠标焦点的时候, 控制台抛出错误Cannot read properties of undefined (reading 'replace'), 而导致jquery.validate无法对其他表单组件进行校验
在这里插入图片描述

1.定位问题:

jquery.validate的初始化是监听了表单$("#addOrEditForm").validate(), 所以我猜富文本编辑器里有其他表单标签也被监听了
在这里插入图片描述
发现确实有一些input等

2.解决方案

使用jquery.validateignore将富文本的一些无用表单忽略ignore: ".note-editor input, .note-editor textarea,.note-editable"

// 表单提交
    $("#addOrEditForm").validate({
      ignore: ".note-editor input, .note-editor textarea,.note-editable",
      submitHandler: function () {
      // 使用jq.serializeJSON 获取表单数据
        var params = $("#addOrEditForm").serializeJSON();
        // 获取富文本数据
        params.productDescription = $(".productDescription").summernote("code");
        
      },
      // 自定义jquery.validate一些样式 可以忽略
      errorElement: "span",
      errorPlacement: function (error, element) {
        error.addClass("text-danger");
        element.closest(".form-group").append(error);
      },
      highlight: function (element, errorClass, validClass) {
        $(element).addClass("is-invalid");
      },
      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass("is-invalid");
      }
    });

刷新页面, 正常输入并校验!

附几个summernote常用方法

summernote官方文档(英文)
高度和焦点

如果设置焦点选项,则初始化Summernote后光标将聚焦可编辑区域。

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});

销毁

$('#summernote').summernote('destroy');

获取和设置代码
获取匹配元素集中第一个夏季笔记的 HTML 内容。

var markupStr = $('#summernote').summernote('code');

如果初始化多个编辑器,可以使用jQuery eq获取第二个summernote的HTML内容。

var markupStr = $('.summernote').eq(1).summernote('code');

设置元素内容的 HTML 字符串。

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/78472.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nacos的服务注册之服务端

上节讲到了nacos的客户端,通过把实例信息封装成instance,调用服务端的接口:/instance,进行注册. 接下来,我们一起看看服务端是怎么处理客户端发来的请求的. 服务端 在nacos-naming这个模块中,在这个模块里边有一个InstanceController 其中在com.alibaba.nacos.naming.contro…

Netty_03_ByteBuf和网络中拆包粘包问题及其解决

文章目录一、前言二、ByteBuf(Netty API中定义的数据类型)2.1 ByteBuf2.1.1 ByteBuf创建的方法有两种2.1.2 ByteBuf的存储结构2.1.3 ByteBuf中常用的方法APIReader相关方法Write相关方法Write可能导致扩容2.2 ByteBuf代码(演示读写指针移动和扩容)2.2.1 …

RabbitMQ:基础概述

RabbitMQ 是一个消息中间件,它接收消息并且转发,是“消费-生产者模型”的一个典型的代表,一端往消息队列中不断的写入消息,而另一端则可以读取或者订阅队列中的消息。 RabbitMQ 于 2007 年发布,由 erlang 语言进行开源…

37_软件I2C通信实验

目录 I2C通信协议 多主机I2C总线系统结构 I2C协议 应答信号ACK 数据有效性 数据传输 I2C设备地址 I2C通讯整个过程 硬件连接 EEPROM(24C02) 24C02字节写时序 24C02字节读时序 实验源码 I2C通信协议 I2C(IIC,Inter-Integrated Circuit),两线式串行总线,由PHILIPS公…

ATtiny13与Proteus仿真-ADC仿真

ADC仿真 1、ADC介绍 ATtiny13的ADC有如下特点: 10位分辨率0.5 LSB 积分非线性 2 LSB 绝对精度13 - 260 μs 转换时间在最高分辨率下高达 15 kSPS四个多路复用单端输入通道ADC 结果读数的可选左调整0 - VCC ADC 输入电压范围可选择的 1.1V ADC 参考电压自由运行或单一转换模式…

[附源码]计算机毕业设计家庭医生签约服务管理系统Springboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

dmb ish osh

转自:原理和实战解析Linux中如何正确地使用内存屏障 圈里流传着一句话“珍爱生命,远离屏障”,这足以说明内存屏障是一个相当晦涩和难以准确把握的东西。使用过弱的屏障,会导致软件不稳定。使用过强的屏障,会引起性能问…

c语言篇(动态内存管理)

前言: 对于数据的存储我们可以静态存储,也可以动态存储,两种方式都有自己特有的好处,这篇文章教我们如和进行动态的数据存储!!!! 💞 💞 欢迎来到小马学习代码…

自动驾驶之单目3D目标检测TensorRT调研

目前在github上只能找到2个项目 TensorRT-CenterNet-3D tkDNN 两者都是使用CenterNet,但第1个基于TensorRT5,无法与当前最新的TensorRT6和TensorRT7兼容。经测试,第1个无法在XavierJetpack 4.3/4.4上部署,因此选择部署第二个tkDNN。 1. 基本…

Python学习基础笔记三十八——time模块

1、time模块:和时间有关系的,我们就用到了时间模块: import timeprint(time.time()) #获得当前时间戳 2、表示时间的三种方式: 在Python中,通常用三种方式来表示时间:时间戳、元组(struct_time)、格式…

LeetCode刷题复盘笔记—一文搞懂动态规划之337. 打家劫舍 III问题(动态规划系列第十九篇)

今日主要总结一下动态规划完全背包的一道题目,337. 打家劫舍 III 题目:337. 打家劫舍 III Leetcode题目地址 题目描述: 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口,我们称之为 root 。 除了 root 之外&#xff0…

UDS入门至精通系列:Service 19(二)

文章目录 前言一、协议的定义(19 04/06)二、数据库编辑(CANdelaStudio)三、CAPL应用(Service 19 04 / 06)总结前言 本文主要讲述了ECU诊断中用到的DTC Status以及Service 19 02作用和用法。 本文主要讲述了ECU诊断中用到的DTC Status以及Service 19 02作用和用法。 本文…

Transformer15

今天还是Transformer~~ 都连载这么多了 , 据说是全球首个面向遥感任务设计的亿级视觉大模型 大规模视觉基础模型在基于自然图像的视觉任务中取得了重大进展。得益于良好的可扩展性和表征能力,基于视觉Transformer (Vision Transformer, ViT) 的大规模视觉基础模型吸…

Instruction Tuning(FLAN、instructGPT、chatGPT)

首页最近被chatGPT刷屏,但翔二博主左看右看发现很多想法似乎都是一脉相通的,于是连夜从存档中找了一些文章尝试理一理它的理论路线。 具身智能综述和应用(Embodied AI)多模态中的指令控制 同时想到今年在智源人工智能前沿报告&a…

线程,线程池的使用

文章目录线程,线程池的使用1. 多线程基础1.1 线程和进程1.2 多线程的创建1.2.1 继承Thread类1.2.2 实现Runnable接口1.2.3 匿名内部类方式1.2.4 守护线程1.3 线程安全1.3.1 卖票案例1.3.2 线程同步2. 线程池的实现方式2.1 Java提供的四种线程池2.2 线程池的创建原理…

微信小程序开发【从0到1~入门篇】

目录 1. 微信小程序介绍 1.1 什么是小程序? 1.2 小程序可以干什么? 2. 申请账号 2.1 申请帐号 2.2 测试号申请(我们小程序账号申请完成之后,建议务必要申请一个测试号用来开发) 3. 安装开发工具 3.1 选择稳定…

我的创作纪念日(2021-12-10 2022-12-10)

🌆 内容速览阴差阳错成为一名博主?这一年来的收获日常生活未来憧憬阴差阳错成为一名博主? 如上图所见,她就是我在CSDN上发布的第一篇博客——无标题,有时候机缘来的那么突然,我甚至都没有给她想一个凑合的名…

spring——Spring 注入内部Bean——构造函数方式注入内部 Bean

项目依赖&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.or…

【MySQL进阶篇】存储引擎

&#x1f349;个人主页&#xff1a;个人主页 &#x1f353;系列专栏&#xff1a;MySQL数据库 目录 1.MySQL体系结构 1). 连接层 2). 服务层 3). 引擎层 4). 存储层 2.存储引擎介绍 3.存储引擎特点 1. InnoDB 2.MyISAM 3.Memory 4.区别及特点 4.存储引擎选择 1.MySQ…

MAC QT OpenGL 图像曝光度调节

目录 一.MAC QT OpenGL 图像曝光度调节演示 1.原始图片2.效果演示 二.MAC QT OpenGL 图像曝光度调节源码下载三.其他平台图像曝光度调节版本 1.IOS 曝光度演示效果2.Windows OpenGL ES 曝光度演示效果3.Windows OpenGL 曝光度演示效果 四.猜你喜欢 零基础 OpenGL ES 学习路线推…