如何在浏览器验证带有“必填”属性的字段后禁用提交按钮?

2024-05-08

我们使用以下 jQuery 来禁用提交按钮,以防止重复提交(服务器速度慢!)。

jQuery(document).ready(function($){

    /*SENDE BTN INAKTIV STELLEN*/
    $("input[type=submit]").click(function() {
        $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
    });

});

但是,在浏览器验证了 HTML 表单中带有“required”属性的所有字段后,我们如何触发脚本呢?


EDIT: I found a much more elegant way to do this. Please accept this answer if it works for you.

 jQuery(document).ready(function($){

/*SENDE BTN INAKTIV STELLEN*/
    $("input[type=submit]").click(function() {

        var myform = $('#theform');

        //checks if the form is valid
        if(myform[0].checkValidity())
        {
             $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
        }
    });

});


//this is slightly awkward but it works

jQuery(document).ready(function($){

/*SENDE BTN INAKTIV STELLEN*/
$("input[type=submit]").click(function() {
    var flag = true;

    $('[required]').each(function(){
        if(!$(this).val()) 
           flag = false;
    });

    if(flag){
       $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
    }
    else
       return false;
});

});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在浏览器验证带有“必填”属性的字段后禁用提交按钮? 的相关文章

  • 需要存储表的属性值以用于空手道中的断言

    我有一个情况 定位器没有文本值 但它的名为 title 的属性有一个我需要断言的文本值 在为其编写自定义定位器时 我只能获取文本值 而不是特定的属性值 例如 title abcdd Example div class table cell
  • $_POST 返回空

    尝试练习一下 ajax 和 PHP 我不明白为什么每当我发送一些东西时 它都会返回空或未定义的索引 PHP 返回空 JS form submit function var meth this attr action var msg msg
  • 单独的数据间隔 bootstrap 轮播 4

    我想为 Bootstrap 4 轮播上的每张幻灯片设置单独的数据间隔 我尝试了一些其他的 javascript 片段 但是它们似乎不适用于我的代码 例如Bootstrap 4 轮播堆栈溢出 https stackoverflow com q
  • Jquery文件上传插件进度条

    这个插件 https github com blueimp jQuery File Upload wiki管理网页中的文件上传 并且可以在上传过程中添加很多 UI 元素 您创建一个输入文件类型元素 然后绑定 js 文件 使用实例化代码和 w
  • 推荐的 HTML 格式化程序脚本/实用程序? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在单页应用程序中使用 #-URL?

    本文 http danwebb net 2011 5 28 it is about the hashbangs提出了一个非常令人信服的论点 因为 URL 是长期存在的 它们被添加书签并传递 所以它们应该是有意义的 并且使用哈希进行真正的路由
  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos
  • 如何针对 IE 进行优化?

    我有一个 JS 密集型应用程序 它在 IE 中运行缓慢 我将花费大约一周的时间来优化 IE 并且我想要一些关于尝试的方向 我发现这个线程引用Drip https ieleak svn sourceforge net svnroot iele
  • 通过php变量的值设置输入字段的值

    我有一个简单的 php 计算器 代码是 h1 align center This is PHP Calculator h1
  • 为什么该消息没有出现在 Chrome 中的手风琴上方?

    我正在尝试新的 HTML5 验证 当我尝试使用required里面的属性
  • Javascript 制作音频 blob

    我正在测试 html 音频标签 我想制作音频 blob url 就像 youtube 或 vimeo 那样 并将其添加到 src 开始播放音频 我一直在测试new Blob and URL createObjectURL 但我不知道如何使用
  • 使用 jquery 更改锚文本和图标

    我有一个隐藏或显示 div 的锚标记 但我无法更改它的文本和图标 如何更改文本和图标标签 因为目前它将图标标签解析为常规文本 锚标记 a class collapse info btn i class icon arrow up icon
  • Moment.js 动态更新时间(以秒为单位)

    我试图显示时钟 that 每秒更新一次 e g 2015 年 1 月 5 日 12 05 01 它似乎对我来说工作得很好 对于相同的代码 并且只有 moment min js 指向v2 11 0 看看代码 来源 MilkyWayJoe va
  • 使用淘汰赛动态显示/隐藏元素

    我有一个表 有四列 即代码 名称 数量和价格 其中 我想动态更改数量列的内容 元素 通常 它应该显示其中显示数量的元素 当用户单击元素时 我想显示该元素 以便用户可以编辑数量 我正在尝试按照 示例2 来实现淘汰赛文档链接 http knoc
  • Ajax 函数在重定向后不保存滚动位置

    正如标题所述 我编写了一个 ajax 函数 该函数应该滚动到用户在重定向之前所在的位置 我写了一个alert对于测试场景 它确实触发了 但滚动不断回到顶部 我在这里做错了什么 JavaScript ajax type GET url Adm
  • HTML/CSS:页面左侧的导航栏

    我发现创建这样具有良好语义的布局很尴尬 左侧是大约 150 像素宽的列 其中包含导航元素 我想将网站这部分的 HTML 放在 HTML 代码的开头 然后有一个简单的方法来强制页面的其余部分不侵占左侧的区域 150 像素列 我考虑过一些选择
  • 电子邮件模板中的剪贴板功能

    我想在电子邮件模板中发送优惠券代码 一个小按钮 用于复制剪贴板上输入元素的内容 通过电子邮件模板 我的意思是我想发送一封电子邮件 其中包含优惠券代码 并且电子邮件模板中会有一个按钮 允许我将其复制到剪贴板 这可以做到吗 任何帮助将不胜感激
  • 如何在 Safari 和 Native App 之间共享上下文?

    我有需要通过 Safari 设置一些上下文 上下文标记 然后从本机 iOS 应用程序读取该上下文 这样做的最佳实践是什么 到目前为止的一些想法 在 HTML 5 数据库中设置上下文 但我不确定这是否有效 因为该数据库可能只能从 Safari
  • HTML 标签在 Ionic 5 警报文本中不起作用

    我已将以下代码从 Ionic 3 迁移到 Ionic 5 const alert await this alertCtrl create subHeader About b this user name b message Test Mes
  • 将 JSON 发送到 Spring MVC 控制器

    我正在尝试将 JSON 发送到 Spring MVC 控制器 在 Spring MVC 方面 一切都配置正确 下面是代码 但似乎没有运行

随机推荐