Проверка в режиме onclick не останавливает POST для контроллера MVC

Я пытаюсь интегрировать API оплаты Realex и использовал пример, найденный на https://developer.realexpayments.com/#!/integration-api/3d-secure/java/html_js#3dsecurity-accordion, и как часть этого я создали следующую страницу:

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

Несмотря на то, что яваскрипт работает должным образом, я проверил, чтобы в предупреждениях отображались соответствующие сообщения проверки, однако отправка сообщения в контроллер никогда не отменяется, несмотря на событие onclick(), в результате которого возвращается false.

Кто-нибудь может понять, почему это происходит, или я делаю что-то не так?

Источник

1 ответ

Решение

Попробуйте изменить свой onclick обработчик события из onclick="validate();" в onclick="return validate();" это решит эту проблему.

Надеюсь это поможет!.

Источник
Другие вопросы по тегам