Question

我不确定为什么我的javascript表单提交验证无效 - 任何帮助都会非常感激。

我有两个班级的课程：table-first＆amp; table second
使用媒体查询，当屏幕小于740px时隐藏table-first并显示table-second
table-first在凭证和输入字段的输入字段中有一个类“voucher_input”
table-second在凭证输入字段

“voucher-input2”

如果凭证输入字段为空，我编写了一个javascript来阻止提交表单如果为空，则应提示错误消息
该代码适用于“table-first”类“voucher-input” - 当凭证输入字段为空时，表单未提交
但代码与“table-second”类“voucher-input2”的效果不佳 - 表单提交了空代金券输入字段。

我可以告诉我我的代码有什么问题，因为我希望输入字段带有“voucher-input”＆amp; “voucher-input2”在字段为空时提示错误消息

我的代码如下。非常感谢

我的javascript代码：如果凭证字段包含类voucher_input＆amp;，则会发出错误消息。 voucher_input2为空 - 它目前仅提示voucher_input而非voucher_input2

的错误消息

$(document).ready(function () {
    var form = $("#vouchers_form");
    $("#vouchers_form").on("submit", function(e){
        // e.preventDefault();

        var voucher_input = $('.voucher_input').val();
        var voucher_input2 = $('.voucher_input2').val();

        if (voucher_input.length < 1) {
            $("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
            return false;
        }
            else if (voucher_input2.length < 1) {
            $("#popupErrorConfirmVoucherEmpty").popup("open", { transition: "fade", history: false });
            return false;
        }
        else {
            form.submit();
        }
    });
});

html代码：table-first，输入字段为<input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />

<div class="main-table table-first">
    <div class="table-header">select a payment option</div>
    <div class="table-content-container">
        <div class="table-content">
            <div class="table-container">
                <table>
                    <tbody>
                        <tr>
                            <td class="left-content">
                                <div>
                                    <div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
                                    <p>
                                        <a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
                                            <img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
                                            <!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
                                        </a>
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="left-content">
                                <div class="cards-visa-master">
                                    <div class="inner-inner-container">
                                        <img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
                                        <img alt="" src="../../account/gallery/6759612/images/card-master.png" />
                                    </div>
                                </div>
                            </td>
                            <td>
                                <form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
                                    <ul>
                                    <li>
                                        <div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
                                        <div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
                                        <div><input id="voucher_login_btn" type="submit" value="apply" /></div>
                                    </li>
                                    <li>
                                        <p class="voucher-header">Do you have a Promo code?</p>
                                        <div><input class="required voucher_input" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>
                                    </li>
                                    </ul>
                                </form>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- msg start -->
    <div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
        <a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
        <p style="padding: 10px; color: red">You must enter a voucher code</p>
    </div>
    <!-- msg start -->
</div>

html代码：table-second，输入字段为<input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" />

<!-- reponsive design displayed when width screen is below 740px -->
<div class="main-table table-second">
    <div class="table-header">select a payment option</div>
    <div class="table-content-container">
        <div class="table-content">
            <div class="table-container">
                <table>
                    <tbody>
                        <tr>
                            <td class="left-content paypal">
                                <div>
                                    <div class="hidden" id="paypal_express_checkout"><input type="checkbox" checked="checked" value="10147608"/></div>
                                    <p>
                                        <a href="#" id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit">
                                            <img alt="" height="48" src="../../account/gallery/6759612/images/paypal-button.png" width="242" />
                                            <!-- <input id="express_checkout_btn" onclick="paypalPaidAccessSelected();" type="submit" value="Submit" /></p> -->
                                        </a>
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="left-content card">
                                <div class="cards-visa-master">
                                    <div class="cards-visa-master">
                                        <div class="inner-inner-container">
                                            <img alt="" src="../../account/gallery/6759612/images/card-visa.png" />
                                            <img alt="" src="../../account/gallery/6759612/images/card-master.png" />
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <form action="//manager.odyssys.net/account//signin/voucher" data-ajax="false" id="vouchers_form" method="post">
                                    <p class="voucher-header ">Do you have a Promo code?</p>
                                    <div><input class="required voucher_input2" id="voucher" name="voucher" placeholder="Enter Promo Code" type="text" value="" /></div>

                                    <div class="check-button" id="terms"><input class="hidden" id="accept_terms_vouchers_container" name="checkbox" onclick="termsChecked();" type="checkbox" /> </div>
                                    <div class="check-button" id="promotions"><input class="hidden" id="accept_promotions_vouchers_container" name="checkbox" onclick="promotionsChecked();" type="checkbox" /> </div>
                                    <div><input id="voucher_login_btn" type="submit" value="apply" /></div>
                                </form>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- msg start -->
        <div class="popup error" data-role="popup" id="popupErrorConfirmVoucherEmpty">
        <a class="ui-btn-right" data-icon="delete" data-iconpos="notext" data-rel="back" data-role="button" data-theme="a" href="#">Close</a>
        <p style="padding: 10px; color: red">You must enter a voucher code</p>
        </div>
        <!-- msg start -->
    </div>
</div>

Answer 1

错误可能是由于页面上的ID重复造成的。

如果这两个表都在同一页面上，则错误块不应具有相同的ID（popupErrorConfirmVoucherEmpty），因为页面上应该只有一个ID。尝试将第二个名称更改为popupErrorConfirmVoucherEmpty2并相应地更改JS

Javascript表单提交验证不起作用

1 个答案: