Javascript Card.js-在表单中找不到数字输入

我在这里看到了一些其他的帖子，但是没有任何帮助，或者他们的解决方案是我已经做过的

我的卡确实会显示，但控制台中存在以下错误：

Card can't find a numberInput in your form.
Card can't find a expiryInput in your form.
Card can't find a cvcInput in your form.
Card can't find a nameInput in your form.

我目前正在使用jquery.card.js，这是我从这里下载并从dist文件夹中提取的最新版本

这是我的表格中与卡相关的部分：

<div class="box-body" style="">
    <div class='card-wrapper'></div>
    <!-- CSS is included via this JavaScript file -->

    <input type="text" name="number" class="form-control" id="number">
    <input type="text" name="expiry" class="form-control"/>
    <input type="text" name="cvc" class="form-control"/>
    <input type="text" name="name" class="form-control"/>
 </div>

<script>
    $('form').card({
    // a selector or DOM element for the container
    // where you want the card to appear
    container: '.card-wrapper', // *required*

    // all of the other options from above


            formatting: true, // optional - default true

            // Strings for translation - optional
            messages: {
                validDate: 'valid\ndate', // optional - default 'valid\nthru'
                monthYear: 'mm/yyyy', // optional - default 'month/year'
            },

            // Default placeholders for rendered fields - optional
            placeholders: {
                number: '•••• •••• •••• ••••',
                name: 'Full Name',
                expiry: '••/••',
                cvc: '•••'
            },

            formSelectors: {
                numberInput: 'input[name="number"]', // optional — default input[name="number"]
                expiryInput: 'input[name="expiry"]', // optional — default input[name="expiry"]
                cvcInput: 'input[name="cvc"]', // optional — default input[name="cvc"]
                nameInput: 'input[name="name"]' // optional - defaults input[name="name"]
            },

            // if true, will log helpful messages for setting up Card
            debug: true // optional - default false
});
</script>

这是我的卡片设置：

<div class="box-body" style="">
    <div class='card-wrapper'></div>
    <!-- CSS is included via this JavaScript file -->

    <input type="text" name="number" class="form-control" id="number">
    <input type="text" name="expiry" class="form-control"/>
    <input type="text" name="cvc" class="form-control"/>
    <input type="text" name="name" class="form-control"/>
 </div>

<script>
    $('form').card({
    // a selector or DOM element for the container
    // where you want the card to appear
    container: '.card-wrapper', // *required*

    // all of the other options from above


            formatting: true, // optional - default true

            // Strings for translation - optional
            messages: {
                validDate: 'valid\ndate', // optional - default 'valid\nthru'
                monthYear: 'mm/yyyy', // optional - default 'month/year'
            },

            // Default placeholders for rendered fields - optional
            placeholders: {
                number: '•••• •••• •••• ••••',
                name: 'Full Name',
                expiry: '••/••',
                cvc: '•••'
            },

            formSelectors: {
                numberInput: 'input[name="number"]', // optional — default input[name="number"]
                expiryInput: 'input[name="expiry"]', // optional — default input[name="expiry"]
                cvcInput: 'input[name="cvc"]', // optional — default input[name="cvc"]
                nameInput: 'input[name="name"]' // optional - defaults input[name="name"]
            },

            // if true, will log helpful messages for setting up Card
            debug: true // optional - default false
});
</script>

---

正如我之前所说，卡片的图像确实出现了，因此我知道这个脚本的部分实际上正在工作。

结果我需要将行：$'form'.card{更改为表单的特定ID。它现在可以工作了