Question

无法使用带有stripe.js插件的jquery提交表单。我想在创建条带令牌后提交表单。 Jquery验证工作正常。它在控制台中显示错误消息＆＃34;对象不是函数＆＃34; ，我能够创建令牌。

    <?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="">
            <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="submit" id="submit" value="Submit"/>
                </p>
            </fieldset>
        </form>
             </div>
    </body>

    </html>
    <script>


        Stripe.setPublishableKey("pk_test_q8JKhn0ydXmENnxCnJxxV7xC");

        function stripeResponseHandler(status, response) {
          var $form = $('#signupForm');

          if (response.error) {
            // Show the errors on the form
            $form.find('.payment-errors').text(response.error.message);
            $form.find('#submit').prop('disabled', false);
          } else {
            // response contains id and card, which contains additional card details
            var token = response.id;
            // Insert the token into the form so it gets submitted to the server
            $form.append($('<input type="hidden" name="stripeToken" />').val(token));
            // and submit
            $form.get(0).submit();
          }
        };

        $().ready(function() {
        $("#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

@ matthew-arkin帮助我解决了这个问题。只需从提交按钮中删除name和id属性即可与默认的.submit（）操作

冲突

使用：

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

而不是：

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

创建条带标记后提交表单

1 个答案: