[SOLVED] onclick validation not stopping POST to MVC controller

onclick validation not stopping POST to MVC controller

I am trying to integrate a realex payment API and have used the example found on https://developer.realexpayments.com/#!/integration-api/3d-secure/java/html_js#3dsecurity-accordion and as part of this I have set up the following page:

<!DOCTYPE html>
<html>
<head>
    <title>Basic Validation Example</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/rxp-js.js"></script> <!-- Available at https://github.com/realexpayments -->
    <!-- Basic form styling given as an example -->
    <style type="text/css">
        label {
            display: block;
            font-size: 12px;
            font-family: arial;
        }

        input {
            width: 200px;
        }

            input.small {
                width: 50px;
            }

        .twoColumn {
            float: left;
            margin: 0 30px 20px 0;
        }

        .clearAll {
            clear: both;
        }
    </style>
</head>
<body>
    <!-- Basic HTML form given as an example -->
    <form name="myForm" method="POST" autocomplete="off" action="securepayment">
        <p>
            <label for="cardNumber">Card Number</label>
            <input type="text" id="cardNumber" name="card-number" />
        </p>
        <p>
            <label for="cardholderName">Cardholder Name</label>
            <input type="text" id="cardholderName" name="cardholder-name" />
        </p>
        <p class="twoColumn">
            <label>Expiry Date</label>
            <input type="text" id="expiryDateMM" name="expiry-date-mm" aria-label="expiry date month" placeholder="MM" class="small" />
            <input type="text" id="expiryDateYY" name="expiry-date-yy" aria-label="expiry date year" placeholder="YY" class="small" />
        </p>
        <p class="twoColumn">
            <label for="cvn">Security Code</label>
            <input type="text" id="cvn" name="cvn" class="small" />
        </p>
        <p class="clearAll">
            <input value="Pay Now" type="submit" name="submit" onclick="validate();" />
        </p>
    </form>
    <script>
        // Basic form validation using the Realex Payments JS SDK given as an example
        function validate() {
            alert("VALIDATE HIT !!!!")
            var cardNumberCheck = RealexRemote.validateCardNumber(document.getElementById('cardNumber').value);
            var cardHolderNameCheck = RealexRemote.validateCardHolderName(document.getElementById('cardholderName').value);
            var expiryDate = document.getElementById('expiryDateMM').value.concat(document.getElementById('expiryDateYY').value) ;
            var expiryDateFormatCheck = RealexRemote.validateExpiryDateFormat(expiryDate);
            var expiryDatePastCheck = RealexRemote.validateExpiryDateNotInPast(expiryDate);
            if ( document.getElementById('cardNumber').value.charAt(0) == "3" ) { cvnCheck = RealexRemote.validateAmexCvn(document.getElementById('cvn').value);}
            else { cvnCheck = RealexRemote.validateCvn(document.getElementById('cvn').value); }
            if (cardNumberCheck == false || cardHolderNameCheck == false || expiryDateFormatCheck == false || expiryDatePastCheck == false || cvnCheck == false)
            {
                // code here to inform the cardholder of an input error and prevent the form submitting
                if (cardNumberCheck == false) { alert("CARD IS FALSE") }
                if (cardHolderNameCheck == false) { alert("CARD HOLDER NAME IS FALSE") }
                if (expiryDateFormatCheck == false) { alert("EXPIRY DATE FORMAT IS FALSE") }
                if (expiryDatePastCheck == false) { alert("EXPIRY DATE IS IN THE PAST") }
                if (cvnCheck == false) { alert("CVN IS FALSE") }
                return false;
            }
            else
                return true;
        }
    </script>
</body>
</html>

Despite ensuring that the javascript is working as expected I have checked to see that the appropriate validation messages are being displayed in alerts which they are however the post to the controller is never cancelled despite the onclick() event resulting in a return false

Can anyone see why this is happening or am I doing something wrong?

Solution

Try changing your onclick event handler from onclick="validate();" to onclick="return validate();" that will fix this issue.

Hope this helps!.