首页 > 其他分享 >js如何动态清除form表单中input款下的错误信息

js如何动态清除form表单中input款下的错误信息

时间:2023-07-05 16:57:04浏览次数:52  
标签:form 清除 错误信息 表单 款下 input js

form表单

<form action="" method="post" novalidate id="myform">
        {% csrf_token %}
        {% for form in form_obj %}
            <div class="form-group">
                <label for="{{ form.id_for_label }}">{{ form.label }}:</label>
                {{ form }}
                <span style="color: red;float:right" id="error-msg">{{ form.errors.0 }}</span>
            </div>
        {% endfor %}

        <div class="sub">
            <input type="submit" value="登录" class="btn btn-primary">
            <span style="color: red" id="error">{{ error }}</span>
            <a href="{% url 'login_sms' %}">短信登录</a>
        </div>
    </form>

使用js代码动态清除input框下的错误信息

<script>
    $(function () {
        // 点击哪个input框就消除下面的错误信息
	//根据id选择器找到form表单,然后给其绑定一个事件委派,当点击哪个input标签,$(this)就代表该标签,然后在.next()找到放错误信息的标签,让其文本内容清除
        $('#myform').on('click', 'input', function () {
            $(this).next().text('')
            $('#error').text('')
        })
    })
</script>

标签:form,清除,错误信息,表单,款下,input,js
From: https://www.cnblogs.com/suncolor/p/17528977.html

相关文章

  • 前端文件流下载--mockjs污染全局问题
    参考文章https://blog.csdn.net/daotian2016/article/details/123670179 项目场景:项目场景:VUE工程,做了一个代码自动生成可以导出zip的功能。问题描述导出的zip文件打开提示“不可预料的压缩文件末端”,文件打不开。 exportfunctiondownLoadZip(str,filename){ varurl=......
  • API6中JS UI实现富文本组件居右显示
    ​ 【关键字】RichText、富文本组件、API6、JS UI、居右显示 【关键代码如下】index.hml<divclass="container"><divclass="top"><richtext@start="onLoadStart"@complete="onLoadEnd"class="rich">{{con......
  • VUE 2项目使用vue-json-excel导出数据
    记录一下后端返回的json数据转成excel导出这里外面使用的是vue-json-excel1.安装包npminstallvue-json-excel2.组件中使用<download-excelclass="btnbtn-default":data="json_data":fields="json_fields"worksheet="MyWorksheet"name=&......
  • 在linux开发板上加载.ko驱动文件时,出现“insmod: ERROR: could not insert module led
    本文档仅用于本人在学习过程中的记录,方便日后查找问题。问题描述:在ubuntu虚拟机编译出的xxx.ko文件,发送到linux开发板上,执行insmodxxx.ko时,出现“insmod:ERROR:couldnotinsertmoduleled.ko:Invalidmoduleformat”错误。原因查找:1)在linux开发板上,使用uname-r查看lin......
  • js 实现 EventBus 事件总线
     EventBus一般用做单例,EventEmiter一般在组件或模块内使用<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">&l......
  • egg.js
    引入joi进行参数校验按照依赖:npminstalljoi基本使用:constJoi=require('joi');constaddCatalogSchema=Joi.object({catalog:Joi.string().required(),});module.exports={addCatalogSchema,};//使用constctx=this.ctx;const{catalog}=ct......
  • 给第一行单元格赋值 + WPS JS获取工作表的总行数 + WPS JS获取工作表的总行数
    戳我,了解更多相关办公的小技巧给第一行单元格赋值1、在计算机中有一种ASCII编码,其中A在计算机中的表示的数字是65,a的ascii码是97,b的ascii码是98。2、从A1到F1可以看到第一个字母在变化,第2个数字始终是1,A的ascii码是65,F的ascii码是70。3、我们定义letter=65,使letter逐渐靠近70即可。......
  • JavaScript发展历史(JS)
    JavaScript发展历史1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办法,一个是采用现有的语言,许他们直接嵌入网页。另一个是发明一......
  • .net Core Winform 增加NLog
    nlog.config<?xmlversion="1.0"encoding="utf-8"?><nlogxmlns="http://www.nlog-project.org/schemas/NLog.xsd"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><targetsasync=&quo......
  • web js 播放rtsp视频流方案
    场景需要在web端预览海康无线摄像头视频流,所以采用海康自身提供的websdk无法使用方案1rtsp流推送到应用服务器,应用服务器再通过ffmpeg推送到nginx,js再去拉流缺点:多了一层转发,造成了一定的延迟方案2通过webRTC方案,使用现有开源插件webrtc-streamerhttps://github......