Question

我想在使用条带API创建令牌后提交表单，无法在submitHandler中提交表单，我的代码如下所示。请帮帮我。

    <?php
    if(count($_REQUEST)>4)
    {
        print_r($_REQUEST);
        exit;
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <title>untitled</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="generator" content="Geany 0.21" />
    </head>

    <body>
        <script type="text/javascript" src="https://js.stripe.com/v2/"></script>
            <script src="http://jqueryvalidation.org/files/lib/jquery.js"></script>
        <script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>

    <!-- ///////////////////////////////////////////////////////////////////////////////// -->
       <!-- CONTACT FORM -->
       <div class="col-lg-6">
       <h1>CONTACT</h1>

             <h3 class="service_h3">Say Hello! Ask something?</h3>               

    <form class="cmxform" id="signupForm" method="post" action="" novalidate="novalidate">
            <fieldset>
                <legend>Validating a complete form</legend>
                <p>
                    <label for="firstname">Firstname</label>
                    <input id="firstname" name="firstname" type="text">
                </p>
                <p>
                    <label for="lastname">Lastname</label>
                    <input id="lastname" name="lastname" type="text">
                </p>
                <p>
                    <label for="username">Username</label>
                    <input id="username" name="username" type="text">
                </p>


             <fieldset>
              <div class="cardform">
              <span class="payment-errors"></span>
              <div class="field">
                 <label>Card Number</label>
                 <input type="text" size="20" autocomplete="off" class="input card-number" value="4242424242424242">
              </div>              
              <div class="field small">
                  <label>CVC</label>
                  <input type="text" size="4" autocomplete="off" class="input card-cvc" value="424">
              </div>
              <div class="field medium">
                  <label>Expiration (MM/YYYY)</label>
                  <input type="text" class="input card-expiry-month" size="2" placeholder="MM" value="05">

                  <input type="text" class="input card-expiry-year" size="4" placeholder="YYYY" value="2018">
              </div>
              </div>
                </fieldset>

                <p>
                    <input class="btn" type="submit" name="submit1" id="submit" value="Submit" />
                </p>
            </fieldset>
        </form>



             </div>
    </body>

    </html>
    <script>

        Stripe.setPublishableKey("pk_test_q8JKhn0ydXmENnxCnJxxV7xC");

        function stripeResponseHandler(status, response) {
            if (response.error) {
                // re-enable the submit button
                $('#submit').removeAttr("disabled");
                // show the errors on the form
                $(".payment-errors").html(response.error.message);
            } else {
                var form$ = $("#signupForm");
                // token contains id, last4, and card type
                var token = response['id'];
                // insert the token into the form so it gets submitted to the server
                form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
                        // and submit
                form$.get(0).submit();
            }
        }

        $().ready(function() {


            // validate signup form on keyup and submit
            $("#signupForm").validate({
                rules: {
                    firstname: "required",
                    lastname: "required",
                    username: {
                        required: true,
                        minlength: 2
                    }
                },
                messages: {
                    firstname: "Please enter your firstname",
                    lastname: "Please enter your lastname",
                    username: {
                        required: "Please enter a username",
                        minlength: "Your username must consist of at least 2 characters"
                    }
                },
                submitHandler: function(form) {

                    Stripe.createToken({
                        number: $('.card-number').val(),
                        cvc: $('.card-cvc').val(),
                        exp_month: $('.card-expiry-month').val(),
                        exp_year: $('.card-expiry-year').val()
                    }, stripeResponseHandler);
                    return false; // submit from callback

                }

            });


        });
        </script>

我想在创建令牌之前阻止表单提交，并在创建令牌后继续。

Answer 1

您有一个名为submit的输入元素是问题所在。将名称更改为其他名称，它应该可以正常工作。

<input class="btn" type="submit" name="submit1" id="submit1" value="Submit" />

带有name和id的输入被指定为表单对象的属性，因此在您的代码中form$.get(0).submit引用input元素，而不是提交函数。因此调用form$.get(0).submit()会引发错误。

Jquery验证插件不使用条带javascript

1 个答案: