如果未选择所需的输入,则会发出警告

2024-03-26

如何添加警告#printpage当它被禁用时,如果它选择说请检查必填字段?

// Set up a blur event handler for each text field
$('.form-control:not("#BusinessName")').on("blur", function(evt) {
  let count = 0; // Keep track of how many are filled in

  // Loop over all the text fields
  $('.form-control:not("#BusinessName")').each(function(idx, el) {
    // If the field is not empty....
    if (el.value !== "") {
      count++; // Increase the count
    }
  });
  console.log(count);
  // Test to see if all 3 are filled in
  if (count === 3) {
    $("#contactinformation").prop("checked", true); // Check the box
  } else {
    $("#contactinformation").prop("checked", false); // Uncheck the box
  }

  checkCheckboxes();
});

let checkboxes = [...document.querySelectorAll('input[type=checkbox].required')];
let checkCheckboxes = () => document.querySelector('#printpage').disabled = checkboxes.some(check => !check.checked);
checkboxes.forEach(check => check.addEventListener('input',  checkCheckboxes));
checkCheckboxes();

$(document).on('click', '#printpage', function() {
  alert('clicked');
if ($("#printpage").is(":disabled")) {
   alert("Disabled");
 } else {
   alert("enabled");
 }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactName">Contact name:</label>
      <input type="text" class="form-control input-sm" name="ContactName" id="ContactName" size="40" maxlength="120" value="" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="BusinessName">Business name:</label>
      <input type="text" class="form-control input-sm" name="BusinessName" id="BusinessName" size="40" maxlength="120" value="" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactEmail">Email address:</label>
      <input type="text" class="form-control input-sm" name="ContactEmail" id="ContactEmail" size="40" maxlength="80" value="" />
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-7">
    <div class="form-group">
      <label for="ContactPhone">Phone number (business hours):</label>
      <input type="text" class="form-control input-sm" name="ContactPhone" id="ContactPhone" size="40" maxlength="50" value="" />
    </div>
  </div>
</div>

<div class="headline">
  <h2>Checklist</h2>
</div>

<p><strong>Check applicable boxes, print and send in with paperwork.</strong></p>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="contactinformation" id="contactinformation" class="required" disabled/> Contact information
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="feesbreakdown" id="feesbreakdown" /> Estimate of fees - <a href="forms/FeesBreakdown.cfm" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="money" id="money" /> Check or money order
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="certificatetitle" id="certificatetitle" class="required" /> Application for Certificate of Title - <a href="forms/82040PDFCreator.cfm" target="_blank"><span class="noprint">Form HSMV 82040</span></a>
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="proofidentification" id="proofidentification" class="required" /> Identification document
      <font color="red">*Required</font>
      <cfinclude template="../../../includes/proofidentificationtip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="poa" id="poa" /> Power of attorney document - <a href="forms/poa.cfm" target="_blank"><span class="noprint">Form HSMV 82053</span></a>
      <cfinclude template="../../../includes/poatip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="title" id="title" /> Proof of ownership document
    </div>
  </div>
</div>

<cfif isDefined( "session.checkout.vehicle.ownership")>
  <cfif session.checkout.vehicle.ownership is "OOS Title">
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
          <input type="checkbox" name="vinverification" id="vinverification" class="required" /> VIN Verification - <a href="forms/vinverification.cfm" target="_blank"><span class="noprint">Form HSMV 82042</span></a>
          <font color="red">*Required</font>
        </div>
      </div>
    </div>
  </cfif>
</cfif>


<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="billofsale" id="billofsale" /> Itemized dealer invoice, purchase order or Bill of Sale - <a href="forms/Billofsalevehicle.cfm" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="leaseagreement" id="leaseagreement" class="required" /> Lease agreement
      <font color="red">*Required</font>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="insuranceaffidavit" id="insuranceaffidavit" class="required" /> Florida Insurance card, policy, binder or Florida Insurance Affidavit - <a href="forms/InsuranceAffidavit.cfm" target="_blank"><span class="noprint">Form HSMV 83330</span></a>
      <font color="red">*Required</font>
      <!---<cfinclude template="../../../includes/proofinsurancetip.cfm">--->
    </div>
  </div>
</div>

<cfif isDefined( "session.checkout.vehicle.transferring_vehicle_license")>
  <cfif session.checkout.vehicle.transferring_vehicle_license is "Current">
    <div class="row">
      <div class="col-lg-12">
        <div class="form-group">
          <input type="checkbox" name="currentregistration" id="currentregistration" /> Proof of existing registration or license plate to transfer
        </div>
      </div>
    </div>
  </cfif>
</cfif>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <input type="checkbox" name="proofresidency" id="proofresidency" /> Proof of Manatee County Residency document
      <cfinclude template="../../../includes/proofresidencytip.cfm">
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      *For a list of all other forms not listed above that may be applicable - <a href="" target="_blank"><span class="noprint">(click here to print)</span></a>
    </div>
  </div>
</div>


<form method="post">

  <br>
  <div>
    <button class="btn-u btn-u-orange" onclick="window.print(); return false;" name="printpage" id="printpage"><strong class="icon-printer"></strong> Print Checklist</button>
    <button class="btn-u" type="submit" name="submit" id="submit"><strong class="icon-home"></strong> Finished</button>
  </div>

我尝试添加一个 onclick 处理程序。单击并禁用打印页按钮时,打印页按钮不会显示警报,但启用该按钮后,它会显示已启用。如果按钮被禁用,它不会发送警报?


您可以使用 JS 函数 checkValidity(),如果表单无效,这将返回 false。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity

isValid = $('.form').checkValidity()

if (!isValid) {
  $('#printpage').innerText = "Please fill in required fields";
  } else {
  $('#printpage').innerText = "";
}

您的 html 应包含 HTML 有效性检查器,例如必需的。

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

如果未选择所需的输入,则会发出警告 的相关文章

  • SAPUI5 等待延迟对象 // 等待 .done() 函数

    我知道有几个线程对此进行讨论 但我认为在 SAPUI5 上下文中没有线程回答有关 SAPUI5 中的延迟 同步调用的一般主题 在我的控制器中我得到 test function var dfd Deferred var sServiceUrl
  • AngularJS:选择非 2 路绑定到模型

    我正在使用选择来显示客户名称 用户应该能够选择现有客户端 然后更新范围属性 控制器 初始化 首选 if scope clients length gt 0 scope existingClient scope clients 0 View
  • React Native TypeError:无法读取未定义的属性“createClient”

    我是 React 本机框架的新手 我使用 create react native app AwesomeProject 创建了应用程序 我想在我的项目中使用 BLE 因此我安装了 react native ble plx 模块 但是当我创建
  • 尝试注册 RCTBridgeModule 类 RCTFileReaderModule

    尝试为名称 FileReaderModule 注册 RCTBridgeModule 类 RCTFileReaderModule 但该名称已由类 FileReaderModule 注册 尝试使用命令react native run ios在i
  • 测试 jQuery UI 工具提示是否打开

    我正在尝试控制自动打开和关闭jQuery 工具提示 http api jqueryui com tooltip 如何测试工具提示的当前状态是否为打开 我正在使用所有内容的最新版本 Thanks 您可以尝试检查是否有任何课程ui toolti
  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为
  • 从 html5

    我正在寻找一种方法来根据用户代理字符串将控件属性添加到视频标签 我不希望在 iPad 和 Android 之外的任何浏览器或设备上出现控件属性 所以我认为用户代理是最好的识别方法 因为 ipad 和 android 一词出现在各自的 UA
  • 如何避免 TypeScript 中出现虚假的“未使用参数”警告

    我遇到过很多次这种情况 最后决定弄清楚正确的方法是什么 如果我有一个声明方法的抽象父类 然后一些具体子类在其实现中实现真正的逻辑 并且显然使用方法参数 但某些子类不需要在该方法中执行任何操作 因此不要使用方法参数 那些不必执行任何操作的方法
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 如何使用javascript从word文档页面中删除表格设计? Word js 插件

    我正在从表格 html 的 word 文档最后一页插入表格设计 我怎样才能删除它 这是我的代码 async function NewMap try await Word run async context gt html to word h
  • JavaScript 中的最短路径

    几周来我一直在寻找一种在 JavaScript 中计算最短路径的方法 我一直在玩书数据结构和算法作者 格罗纳 Groner 名字恰如其分 https github com loiane javascript datastructs algo
  • 适用于多应用项目的 Grunt 和 requirejs 优化器

    我在让 Grunt 对具有以下结构的项目执行 requirejs 优化时遇到问题 static js apps app js dash js news js many more app files build collections lib
  • Socket.io 与服务器离线连接

    如何检测服务器是否离线或由于其他原因无法连接 我的代码看起来像这样 this socket io connect connectionInfo reconnect false 它不会抛出任何错误 因此 try catch 子句不起作用 Us
  • SlickGrid 回调onRowSelect?

    我想在用户选择表中的一行时添加回调 但我不知道该怎么做 这是我到目前为止所拥有的
  • 在React组件中使用的字符串变量中插入html

    我正在为我的投资组合网站构建一个反应应用程序 目前我已经用 JSX 编写了应用程序 因此我可以添加以下内容 class Project extends React Component render return div h1 this pr
  • 什么是 TinyMCE jQuery 包?

    我被要求在项目中使用 TinyMCE 编辑器 在下载页面上 有一个主包 然后是一个 jQuery 包 This package contains special jQuery build of TinyMCE and a jQuery in
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • ASP.NET JQuery AJAX POST 返回数据,但在 401 响应内

    我的应用程序中有一个网页 需要调用我设置的 Web 服务来返回对象列表 这个调用是这样设置的 document ready function var response ajax type POST contentType applicati
  • 这个 JQuery 指令做什么 $(function(){...}) [重复]

    这个问题在这里已经有答案了 我最近一直在研究JQuery 尽管我知道一些东西 但书上有这样一句话我根本无法理解 function current entry 1 有谁知道这条线是如何工作的以及它的作用是什么 它类似于 JQuery 函数中的
  • 错误:模块“html”不提供视图引擎(Express)

    我正在尝试设置一个简单的路由应用程序 但在渲染页面时不断遇到错误 Error Module html does not provide a view engine 奇怪的是我已经在 app js 文件中指定了视图引擎 但仍然收到错误 app

随机推荐

  • 阻止用户将BMP、TIFF等图像上传到Plone中的ImageField

    用户这样做是因为他们可以 但是 图像自动调整大小等功能会出现故障 这让我成为一个悲伤的男孩 如何限制全站图像上传为 GIF PNG 和 JPEG 对于原型 为了灵巧 使用原型 您可以覆盖图像内容类或使用以下架构创建您自己的自定义图像内容类
  • emacs 智能感知

    我知道这个问题已经讨论过很多次了 但是 emacs 中的 c c intellisense 有什么好的方法吗 我一直无法正确设置 cedet 现在我正在开发一个具有庞大代码库的维护项目 如果没有适当的智能感知 管理起来非常困难 目前我正在使
  • 在每个向量条目处求和到向量末尾

    I have X lt c 1 2 3 4 5 6 我想要 X 之和的输出为 Y lt c 21 20 18 15 11 6 我继续读下去rollapply但它一次只能求和 3 个连续的数字 所以有人可以帮助我吗 你需要cumsum Try
  • 将 Console.WriteLine() 输出重定向到字符串

    我需要采取Console WriteLine 输出 并附加到字符串 我无法更改 Main 方法以简单地附加到字符串而不是写入控制台 我需要一种方法来从控制台读取所有写入的行并将它们附加到字符串 目前 我一直在使用FileStream并将控制
  • Android,有没有参考资料可以查看Android默认图标和图像是什么?

    当我想要设计 UI 时 我需要知道什么是预定义图标 我搜索了网络包括http developer android com design index html http developer android com design index h
  • 调整 coord_pol() 直方图中文本标签的位置

    我陷入了一个小标签问题 即用 ggplot2 制作的一系列极坐标直方图 圆环 这些东西怎么称呼 以下是数据和图表外观的简化示例 df lt data frame Attribute1 10 Attribute2 1 Attribute3 2
  • 如何修复 pip install 产生的 gcc 错误?

    我尝试使用以下命令从 PyPI 安装 python 包 sudo pip3 install switcheo 安装失败并显示以下错误消息 gcc Wno unused result Wsign compare Wunreachable co
  • 如何在 JavaScript 中获取查询字符串值?

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 有没有一种无插件的检索方式请求参数 http en wikipedia org wiki
  • 在 BottomSheetDialog 内的 Viewpager 内嵌套滚动

    简洁版本 我该如何设置NestedScrollingChild of a NestedScrollingParent有多个这样的孩子 长版 我实现了一个BottomSheetDialogFragment其布局由ViewPager 这个vie
  • Delphi 窗口在自定义拖动后失去焦点

    我有这段代码 当我拖动时可以移动我的主窗口MyThingThatDragsIt procedure TMainForm ApplicationMessage var Msg TMsg var Handled Boolean var Scre
  • 查找已选中复选框的顺序

    我正在尝试获取已选中的复选框的顺序 ul class dropdown content checkboxes li li ul
  • 使用cURL上传POST数据和文件

    我想使用 cURL 不仅在 HTTP POST 中发送数据参数 而且还上传具有特定表单名称的文件 我该怎么做呢 HTTP Post 参数 用户 ID 12345 filecomment 这是一个图像文件 HTTP 文件上传 文件位置 hom
  • 在 shell 中生成带有一个特殊字符的随机密码

    我有以下代码 urandom tr dc A Za z0 9 head c 16 这是完美地随机生成密码 我想要两个改变 它只能包含上面列出的一个特殊字符 它应该选择一个随机长度 我尝试过length RANDOM 8 9 然后将长度设置为
  • Android/Firebase - 解析 GCM 事件中的时间戳时出错 - 空时间戳

    我正在构建一个将接收推送通知的 Android 应用程序 我已经完成了 Firebase Cloud Messaging 设置并且几乎可以正常工作 这样我就可以将以下有效负载发送到有效令牌并接收通知和数据 使用网址https fcm goo
  • 本地安装jupyter后,无法运行jupyter笔记本

    在 Linux 红帽上 我尝试在本地安装jupyter pip install jupyter user 似乎一切都安装正确 但是 我不能小跑Jupyter笔记本 nor local bin jupyter 笔记本 Why 安装 pip i
  • 在 Android 上从浏览器下载文件时遇到问题

    我正在使用我的 Galaxy S5 测试正在开发的网站 我们的应用程序在 AWS S3 上公开文件以使用签名 URL 进行下载 下载在内置浏览器和 Chrome 中失败 但在 Firefox 中可以运行 它也可以在我们测试过的所有其他平台上
  • IVpnManagementAgent的IID在哪里定义

    我正在尝试创建一个对象IVpnManagementAgent但我似乎找不到 IID IID x ABI CWindows CNetworking CVpn CIVpnManagementAgent 它的定义是这样我可以实例化RoGetAct
  • “POCO”定义

    有人可以定义 POCO 到底是什么意思吗 我越来越频繁地遇到这个术语 我想知道它是否仅与普通类有关还是意味着更多 普通的旧 C 对象 只是一个普通的类 没有描述基础结构问题的属性或域对象不应具有的其他职责 编辑 正如其他答案所述 它在技术上
  • 隐式类型与匿名类型

    隐式类型和匿名类型之间是否相同或有什么区别 如果不同 那么隐式类型和匿名类型之间的主要区别是什么 这是个很大的差异 隐式类型 局部 变量是未显式给出类型的变量 var i new StringBuilder Now i是隐式类型String
  • 如果未选择所需的输入,则会发出警告

    如何添加警告 printpage当它被禁用时 如果它选择说请检查必填字段 Set up a blur event handler for each text field form control not BusinessName on bl