Adding checkbox validation to a form

Question

I'm having trouble figuring out how to add validation on my form, that sends data to a payment system.

I have validation added to the form on text and numeric fields, but i simply can't figure out to get validation on the checkbox.

Below you can see the HTML and javascript code, some information has been left out - what am i doing wrong??

Thanks

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

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

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

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


      var amount = trimString(objAmount.value);

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

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

          'windowstate': String(iType),

          'paymentcollection': 1,

          'language': 0,

          'merchantnumber': objForm.merchantnumber.value,

          'windowid': 1,

          'orderid': objForm.orderid.value,

          'amount': amount,

          'currency': "208",

          'description': escape(descr),

          'ordertext': "Online betaling af faktura",

          'accepturl': objForm.accepturl.value,

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

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

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

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

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

         objForm.cancelurl.value = sURL;
         objForm.accepturl.value = sAcceptURL + "/epay-gennemfoert/";
        }
     
     
 </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">
     <tr>
         <td style="max-width: 700px; border: 0px;"><input type="text" placeholder="Fakturanummer" name="orderid" maxlength="20" style="width: 200px;" /></td>
        </tr>
        <tr>
         <td style="border: 0px;"><input type="text" placeholder="Beløb i DKK"name="useramount" style="width: 200px;" /></td>
        </tr>
        <tr>
         <td style="border: 0px;"><input type="text" placeholder="Navn" name="customername" style="width: 200px;" maxlength="50" /></td>
        </tr>
        <tr>
         <td style="border: 0px;"><textarea name="customercomment"  placeholder="Evt. kommentar" style="width: 300px; height: 100px;"></textarea></td>
        </tr>
        <tr>
               <td  style="border: 0px;">
        <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>

Dwza · Answer 1 · 2017-07-10T09:53:16.030

0

Shouldn't this be very simple ? (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/

According to your comment, here is a jquery sample i made. May this helps you for your behavior

You should care if your document is fully loaded: $(document).ready()

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

Simple JS code

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>

I hope this helps you to solve this :)

edited Jul 10 '17 at 09:53

answered Jul 07 '17 at 09:13

Dwza

6,494
6
41
73

there is already required on the checkbox..and the input type is currently button instead of submit.. but i have tried with submit as well – René Geertsen Jul 07 '17 at 09:18
Could you may describe the error you get ? or what it actualy should do when it it fails or successes? – Dwza Jul 07 '17 at 09:20
are you trying to get your own error messages or what ? – Dwza Jul 07 '17 at 09:23
yes, i would like to display a error message.. but i just noticed now, that it actually displays the requiered as in your example, but it skips and loads the payment form anyway.. you can see it in action here: http://www.younesrejser.dk/e-pay-betaling/ – René Geertsen Jul 07 '17 at 09:38
i prefer the prompt messages but you can use your own. you could prevent the form from submit by using e.preventDefault(). See https://stackoverflow.com/questions/6462143/prevent-default-on-form-submit-jquery and submit it by javascript/jquery (or what ever you use) when validation successes. – Dwza Jul 07 '17 at 09:53
i don't mind the prompt message, as it shows the specific field, but i've been trying to do exactly that(making sure that the submit action isn't allowed unless it's checked). So my issue is more or less that i really don't know what i'm supposed to add, ad where to add it in my javascript?. – René Geertsen Jul 07 '17 at 10:12
see my edit, there you can see (with and without jquery) how to get the form on sumbit and deny the submit untill you validated it and send it by your self – Dwza Jul 07 '17 at 10:14
where would i need to add this? - as a seperate script, or could i place this somewhere in the original script, i've tried to add it in the end, but without luck - i'm i correct in assuming that the code should be edited, as below to work with my code?. document.querySelector("#ePay").addEventListener("submit", function(e){ e.preventDefault(); //stop form from submitting var isValid = document.getElementById("terms").checked; if(isValid){ this.submit(); }else{ alert("please check the checkbox befor"); } }); – René Geertsen Jul 07 '17 at 13:07
seems to be correct as you described it in this comment. You may should check if the js is load on document ready state.... you also may have a look at https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-to-jquerys-ready-how-to-call-a-function-when-the – Dwza Jul 10 '17 at 09:41

Dasma · Answer 2 · 2017-07-10T11:32:42.543

0

If you don't want to get the support from js lib/framework, just add the below code, to the start payment. But I will strongly recommend to use jquery or angular.

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

edited Jul 10 '17 at 11:32

answered Jul 10 '17 at 09:18

Dasma

1,023
13
34

Adding checkbox validation to a form

2 Answers2