首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS setCustomValidity第一次不工作

JS setCustomValidity是HTML5中的一个方法,用于自定义表单元素的验证错误信息。当表单元素的值不符合预期时,可以使用setCustomValidity方法来设置错误提示信息。

该方法的使用方式如下: element.setCustomValidity(message);

其中,element是要设置错误信息的表单元素,message是要显示的错误提示信息。

setCustomValidity方法的工作原理是,在表单元素的验证过程中,如果该元素的值不符合要求,浏览器会检查是否调用了setCustomValidity方法。如果调用了该方法并传入了非空字符串作为参数,浏览器会将该字符串作为错误提示信息显示给用户。

然而,有时候会遇到setCustomValidity方法第一次调用不起作用的情况。这可能是因为在第一次调用之前,表单元素的验证状态已经被浏览器确定为有效,因此不会显示错误信息。只有在表单元素的值发生改变后,再次触发验证时,setCustomValidity方法才会生效。

为了确保setCustomValidity方法能够在第一次调用时生效,可以在调用该方法之前先将表单元素的值设置为无效,然后再设置错误提示信息。示例代码如下:

代码语言:txt
复制
element.setCustomValidity('');
element.setCustomValidity(message);

这样,在第一次调用setCustomValidity方法时,即使表单元素的值没有发生改变,也能够正确地显示错误提示信息。

关于setCustomValidity方法的更多信息,可以参考腾讯云的文档:setCustomValidity方法

需要注意的是,以上答案中提到的腾讯云仅作为示例,实际应用中可以根据具体需求选择适合的云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 128 天上班工作:照样领工资 9.5 万

    和风畅想公司为证明杜某试用期不能胜任岗位工作提交了《录取聘用函》《试用期目标设定表》《工作不胜任数据参考说明》、录音、其他人员工完成的测试用例。...《试用期目标设定表》中载明杜某的主要工作职责是:“1.执行日常测试工作;2.熟悉、掌握业务;3.整理、优化好测试用例;4.性能测试;5.职业技能提升。”...与上述工作职责相对应的衡量标准为:“按期交付,长期bug发现率高于平均水平,遗漏率小于3%;能够胜任车长或备份车长职责,外部干系评价良好;对Case集有整体把握,Case集功能完备、简洁、冗余并且能适应最新产品...和风畅想公司称《工作不胜任数据参考说明》系杜某的上级主管对其在试用期间的工作评价,但无上级主管签字亦无杜某确认痕迹,该说明中提到杜某存在“工作产出偏低”“组内任务相应偏慢,日常工作积极性偏低”“测试质量低...杜某提交工作数据统计截图、统计数据、自行整理的工作成果、办公软件聊天记录、微信聊天记录,以证明其完成了和风畅想公司安排的工作任务,不存在不能胜任的情况。

    2.2K20

    用神奇的 form 验证 API 来优化你的表单验证

    作者:陈大鱼头 github:KRISACHAN 前言 鱼头曾在 『极限版』掺水,用纯 CSS 来实现超飒的表单验证功能 一文中分享过一个花里胡哨的 纯 CSS 的表单验证功能 。...typeMismatch(只读) true / false 当表单元素输入的值与类型匹配时为 true ,否则为 false 。此属性关联伪类 :valid / :invalid 。...stepMismatch(只读) true / false 当表单元素输入的值与 step 的值匹配 时为 true ,否则为 false 。...() setCustomValidity() 用于设置表单元素 validationMessage 的值。...搞不懂为啥 W3C 暴露出样式修改的属性。。。 参考资料 『极限版』掺水,用纯 CSS 来实现超飒的表单验证功能 『真香警告』这33个超级好用的CSS选择器,你可能见都没见过。

    1.1K20

    jQuery基础

    输入“星期二”,“星期三”,“星期四”时,弹出“努力工作” 输入“星期五”时,弹出“明天就是周末了” 输入其他内容,弹出“放松休息” 关键代码: <script type="text/javascript...; break; case "星期二": case "星期三": case "星期四": alert("努力工作。")...document.getElementById("img"); var index = 1; var arr = document.getElementsByTagName("li"); // 第一次加载的时候...和图片素材)请点击最后的链接(待更新) 首页js 图书展示js 购物车js 新用户注册js 用户登录js /*新手入门下拉列表效果*/ $("#menu").hover(function () {...1) 点击每行中的删除按钮 ,删除当前行数据信息; 以下为关键代码,包含样式。 HTML部分 JS部分 <!

    7.4K10

    解剖 WebGL & Three.js 工作原理

    我们讲两个东西: 1、WebGL背后的工作原理是什么? 2、以Three.js为例,讲述框架在背后扮演什么样的角色? 二、我们为什么要了解原理?...在图元生成完毕之后,我们需要给模型“上色”,而完成这部分工作的,则是运行在GPU的“片元着色器”来完成。...5.1、three.js顶点处理流程 从WebGL工作原理的章节中,我们已经知道了顶点着色器会将三维世界坐标转换成屏幕坐标,但实际上,坐标转换不限于投影矩阵。...实际上,上面所有步骤,three.js都帮我们完成了。 5.1.5、three.js顶点处理具体流程 所以有了,多次矩阵计算,多次坐标换算。three.js具体是怎么做的呢?...5.3、three.js完整的运行流程 当我们选择材质后,three.js会根据我们所选的材质,选择对应的顶点着色器和片元着色器。 three.js中已经内置了我们常用着色器。

    9.7K21
    领券