javascript - 如果未选择所需的输入，则发出警告

Question

当它被禁用时，我如何向 #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 处理程序。单击并禁用打印页面按钮时，打印页面按钮不会显示警报，但一旦启用该按钮，它就会显示已启用。如果按钮被禁用，它不会发送警报？

Answer 1

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

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" />