フォームにチェックボックスの検証を追加する

Question

データを支払いシステムに送信するフォームの検証を追加する方法がわかりません。

テキストフィールドと数値フィールドのフォームに検証が追加されていますが、チェックボックスで検証を取得することはできません。

以下にHTMLコードとJavaScriptコードが表示されています。一部の情報は除外されています。何が間違っていますか？

おかげ

<script type="text/javascript" src="https://ssl.ditonlinebetalingssystem.dk/integration/ewindow/paymentwindow.js"></script> 
 
<script type="text/javascript"> 
 

 
\t  var iMinorUnit = 0; 
 
\t \t \t 
 
\t  function startPayment(iType) 
 
\t  { 
 
\t   var objForm = document.getElementById("ePay"); 
 
\t   var objAmount = objForm.useramount; 
 

 
      if (objForm.merchantnumber.value.length != 7) { 
 
\t    alert("Du mangler at indtaste dit merchant!"); 
 
\t    return false; 
 
\t   } 
 
      
 
      if (objForm.orderid.value.length < 1) 
 
\t \t  { 
 
\t \t \t  alert("Du mangler at angive dit fakturanummer eller referencen til din betaling!"); 
 
\t \t \t  objForm.orderid.focus(); 
 
\t \t \t  return false; 
 
\t \t  } 
 

 
\t \t  if (objAmount.value.length < 1 || objAmount.value == "") { 
 
\t \t   alert("Indtast venligst beløbet."); 
 
\t \t   objAmount.focus(); 
 
\t \t   return false; 
 
\t \t  } 
 
\t \t  else if (objAmount.value.indexOf(".") > -1) { 
 
\t \t   alert("Beløbet må ikke indeholde tegnet '.' (punktum).\n\nDecimaler skal angives med ','. F.eks. 199,95"); 
 
\t \t   objAmount.focus(); 
 
\t \t   return false; 
 
\t \t  } 
 

 

 
\t \t  var amount = trimString(objAmount.value); 
 

 
\t \t  if (iMinorUnit == "-1") { 
 
\t \t   alert("Du har indtastet et ugyldigt beløb!\n\nBeløbet kan kun indeholde tal."); 
 
\t \t   objAmount.focus(); 
 
\t \t   return false; 
 
\t \t  } 
 
\t \t  else if (iMinorUnit == "0") 
 
\t \t   amount = parseInt(amount) * 100; 
 

 
\t \t  var descr = "Kundens navn: " + objForm.customername.value + "<br>Evt. kommentar: " + objForm.customercomment.value; 
 
\t \t  
 
      paymentwindow = new PaymentWindow({ 
 

 
\t \t   'windowstate': String(iType), 
 

 
\t \t   'paymentcollection': 1, 
 

 
\t \t   'language': 0, 
 

 
\t \t   'merchantnumber': objForm.merchantnumber.value, 
 

 
\t \t   'windowid': 1, 
 

 
\t \t   'orderid': objForm.orderid.value, 
 

 
\t \t   'amount': amount, 
 

 
\t \t   'currency': "208", 
 

 
\t \t   'description': escape(descr), 
 

 
\t \t   'ordertext': "Online betaling af faktura", 
 

 
\t \t   'accepturl': objForm.accepturl.value, 
 

 
\t \t   'cancelurl': objForm.cancelurl.value, 
 
       
 
       'textonstatement': objForm.textonstatement.value 
 
\t \t  }); 
 

 
\t \t  paymentwindow.open(); 
 
       
 
     
 
\t  } 
 
      
 
\t  function trimString(str) { 
 
\t   iMinorUnit = 0; 
 
\t   var tmp = String(str); 
 
\t   var returnVal = ""; 
 
\t   var cVal = ""; 
 

 
\t   if (tmp != "") { 
 
\t    for (var i = 0; i < tmp.length; i++) { 
 
\t     cVal = tmp.substr(i, 1); 
 

 
\t     if (!isNaN(cVal)) 
 
\t      returnVal = returnVal + cVal; 
 
\t     else { 
 
\t      if (cVal != ",") { 
 
\t       iMinorUnit = -1; 
 
\t       break; 
 
\t      } 
 
\t      else 
 
\t       iMinorUnit = 1; 
 
\t     } 
 
\t    } 
 
\t   } 
 

 
\t   return returnVal; 
 
\t  } 
 
\t  
 
\t  function init() 
 
\t  { 
 
\t   var sURL = String(window.location); 
 
\t   var arrURL = sURL.split("/"); 
 
\t   var sAcceptURL = ""; 
 
\t   var objForm = document.getElementById("ePay"); 
 
\t   var n; 
 
\t   
 
\t   for(n = 0; n < arrURL.length - 1; n++) 
 
\t    sAcceptURL += arrURL[n] + "/"; 
 

 
\t   objForm.cancelurl.value = sURL; 
 
\t   objForm.accepturl.value = sAcceptURL + "/epay-gennemfoert/"; 
 
     } 
 
\t  
 
\t  
 
\t </script>

<form id="ePay" style="max-width: 600px;">   
 
    <b><u>Online betaling</u></b> 
 
    Alle felter, undtaget kommentarfelt skal udfyldes. 
 
    <br /><br /> 
 
    <table cellspacing="4" cellpadding="4"> 
 
\t  <tr> 
 
\t   <td style="max-width: 700px; border: 0px;"><input type="text" placeholder="Fakturanummer" name="orderid" maxlength="20" style="width: 200px;" /></td> 
 
     </tr> 
 
     <tr> 
 
\t   <td style="border: 0px;"><input type="text" placeholder="Beløb i DKK"name="useramount" style="width: 200px;" /></td> 
 
     </tr> 
 
     <tr> 
 
\t   <td style="border: 0px;"><input type="text" placeholder="Navn" name="customername" style="width: 200px;" maxlength="50" /></td> 
 
     </tr> 
 
     <tr> 
 
\t   <td style="border: 0px;"><textarea name="customercomment" placeholder="Evt. kommentar" style="width: 300px; height: 100px;"></textarea></td> 
 
     </tr> 
 
     <tr> 
 
       <td style="border: 0px;"> 
 
\t  <input type="checkbox" name="checkbox" value="check" id="terms" required />Jeg har læst og accepteret alle <a href="http://#"><u>handelsbetingelser</u></a></td></tr> 
 
       <tr> <td colspan="3" style="text-align: left; padding-top: 10px; border: 0px;"><input type="button" value="Betal" onclick="startPayment(3)" style="width: 180px;" /></td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="3" style="padding-top: 30px; border: 0px;"> 
 
       <table cellspacing="0" cellpadding="0"> 
 
        <tr> 
 
         <td style="vertical-align: top; padding-right: 20px; border: 0px;"><a href="http://www.epay.dk" target="_blank"><img src="/epay/epay-payment-solutions.gif" width="75" height="44" style="border: 0px;" alt="ePay/Payment Solutions" /></a></td> 
 
         <td style="vertical-align: top; font-size: 11px; padding-top: 2px; border: 0px;"> 
 
          <b>SIKKER BETALING</b> 
 
          <br /> 
 
          <span class="notranslate">ePay/Payment Solutions</span> er PCI certificeret af VISA/Mastercard,<br />og al kommunikation foregår krypteret via en sikker forbindelse. 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <input type="hidden" name="merchantnumber" value="8025944"/> 
 
    <input type="hidden" name="accepturl" value="" /> 
 
    <input type="hidden" name="cancelurl" value="" /> 
 
    <input type="hidden" name="textonstatement" value=""/> 
 
</form>

Answer 1

これは非常に単純なことではないでしょうか？ (Apart from the security gaps)

<form> 
 
    Needed Checkbox: <input type="checkbox" required> 
 
    <input type="submit" /> 
 
</form> 
 
<!-- brings up its own error when it fails -->

Alternativ：https://jsfiddle.net/w7baj016/

あなたのコメントによると、ここで私が作ったjqueryのサンプルです。

How to care about the document load state with js

//you should care that the document is fully loaded (ready) 
 
document.querySelector("#myForm").addEventListener("submit", function(e){ 
 
    
 
    e.preventDefault(); //stop form from submitting 
 
    var isValid = document.getElementById("some").checked; 
 

 
    if(isValid){ 
 
     this.submit(); 
 
    }else{ 
 
     alert("please check the checkbox befor"); 
 
    } 
 
});

<form id="myForm"> 
 
<input id="some" type="checkbox"> 
 
<input type="submit" /> 
 
</form>

//care if fully loaded 
 
$("#myForm").on('submit',function(e){ 
 

 
    e.preventDefault(); 
 
    //i guess in js you can simply call event.preventDefault(); 
 

 
    if($("#some").prop("checked") == false){ 
 
     alert("You need to Check this first"); 
 
    }else{ 
 
     this.submit(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm"> 
 
    <input id="some" type="checkbox"> 
 
    <input type="submit" /> 
 
</form>

シンプルなJSコード：ことがありますが、これは、ドキュメントが完全にロードされている場合

は、あなたが気にしなければならないあなたの行動のためにあなたを助けます

私は、これはあなただけの開始支払いに、以下のコードを追加し、libに/フレームワークのJSからのサポートを取得する必要はありません場合は、この:)

Answer 2

を解決するのに役立ちます願っています。しかし、私は強くjqueryまたは角度を使用することをお勧めします。

if(objForm.checkbox.checked) { 
    console.log("the box is checked") 
} else { 
    console.log("the box is not checked") 
}