onclick 验证不停止 POST 到 MVC 控制器

Question

我正在尝试集成 realex 支付 API 并使用了 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>

尽管确保 javascript 按预期工作，但我已经检查过是否在警报中显示了适当的验证消息，但尽管如此，控制器的 post 从未被取消onclick() 事件导致 return false

谁能看出这是为什么，还是我做错了什么？

Answer 1

尝试将您的 onclick 事件处理程序从 onclick="validate();" 更改为 onclick="return validate();"，这将解决此问题。

希望对您有所帮助！

onclick 验证不停止 POST 到 MVC 控制器

onclick validation not stopping POST to MVC controller

javascript

validation

asp.net-mvc

realex-payments-api