尽管检测到错误，setCustomValidity仍未向HTML发送错误消息

编程问答 2022-10-31

问题描述

我遇到一个问题，我试图使用setCustomValidity（）来对正在处理的信用卡项目进行自定义错误消息。这些全都来自学校的学习任务，因此某些代码有些高级，可以使用。

下面是我正在使用的表格。它应该允许用户在使用自定义错误消息来提醒用户空白字段时填写信用卡信息。

该代码可用于检测用户是否无法填写姓名输入字段（<label for="cardName">Name*</label>和function validateName()）。

但是，当使用带有信用卡（<fieldset id="cards">和function validateCredit() {）的单选按钮时，这样做没有成功。 JS代码能够检测到用户没有输入任何内容，但不会向HTML发送任何错误。然后，对于卡号（<label for="cardNumber">Credit Card Number*</label>和function validateNumber()）完全不这样做

  <form id="payment" name="payment" method="post" action="co_temp.html">         
         <fieldset id="creditcard">
            <legend>Credit @R_177_4045@ion</legend>

            <label for="cardName">Name*</label>
            <input name="cardName" id="cardName" required type="text" />              

            <fieldset id="cards">
               <label class="cardLabel">Credit Card*</label>
               <label class="cardLabel">
                  <input name="credit" value="amex" type="radio" required />
                  <img src="co_amex.png" alt="American Express" />
               </label>
               <label class="cardLabel">               
                  <input name="credit" value="discover" type="radio" />
                  <img src="co_discover.png" alt="discover" />
               </label>
               <label class="cardLabel">                  
                  <input name="credit" value="master" type="radio"  />
                  <img src="co_master.png" alt="MasterCard" />
               </label>
               <label class="cardLabel">                  
                  <input name="credit" value="visa" type="radio"  />
                  <img src="co_visa.png" alt="Visa" />
               </label>
            </fieldset>          

            <label for="cardNumber">Credit Card Number*</label>
            <input name="cardNumber" id="cardNumber" required type="text"
                   pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$"/>

            <label for="expMonth">Expiration Date*</label>
            <select id="expMonth" name="expMonth">
               <option value="mm">mm</option>
               <option value="01">01</option>
               <option value="01">02</option>
               <option value="01">03</option>
               <option value="01">04</option>
               <option value="01">05</option>
               <option value="01">06</option>
               <option value="01">07</option>
               <option value="01">08</option>
               <option value="01">09</option>
               <option value="01">10</option>
               <option value="01">11</option>
               <option value="01">12</option>
            </select>
            <span> / </span>
            <select id="expYear" name="expYear">
               <option value="yy">yy</option>
               <option value="2018">2018</option>
               <option value="2019">2019</option>
               <option value="2020">2020</option>
               <option value="2021">2021</option>
               <option value="2022">2022</option>
            </select>            

            <label for="cvc">CVC*</label>
            <input name="cvc" id="cvc" required pattern="^\d{3,4}$" type="text"/>
         </fieldset>

         <p id="footnote">* - required Item</p>        
         <input type="submit" id="subButton" value="Submit Payment" />         
      </form>

JavaScript：

function runSubmit() {
    validateName();
    validateCredit();
    validateNumber();
}

// Not working at all
function validateNumber() {
    var cardNumber = document.getElementById("cardNumber");
    if (cardNumber.validity.valueMissing) {
        console.log("No card detected")
        cardNumber.setCustomValidity("Enter your card Number");
    } else if (cardNumber.validity.patternMismatch) {
        console.log("Invalid card detected")
        cardNumber.setCustomValidity("Enter a valid card number");
    } else {
        cardNumber.setCustomValidity("");
    }
}

// Not working. Detects but doesn't send error. 
function validateCredit() {
    var creditCard = document.forms.payment.elements.credit[0];
    if (creditCard.validity.valueMissing) {
        console.log("No button selected")
        creditCard.setCustomValidity("Select your credit card")
        creditCard.reportValidity();
    } else {
        creditCard.setCustomValidity("");
    }
}

// Working
function validateName() {
    var cardName = document.getElementById("cardName");
    if (cardName.validity.valueMissing) {
        cardName.setCustomValidity("Enter your name as it appears on your card");
        cardName.reportValidity();
    } else {
        cardName.setCustomValidity(" ");
    }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptnodes