Javascript form submission validation is not working

Question

I am unsure why my javascript form submission validation is not working – any help would be much appreciated.

• I have 2 tables with a class: table-first & table second
• Using media query, when screen is less than 740px table-first is hidden and table-second is displayed
• table-first has a class “voucher_input” on the input field for a voucher &
• table-second has a class called “voucher-input2” on the voucher input field

• I have written a javascript to prevent submission of the form if the voucher input field is empty And if empty it should prompt up an error message

• The code works well for “table-first” with the class “voucher-input” – a form is not submitted when the voucher input field is empty

• But the code does not work well with “table-second” with the class “voucher-input2” – the form submits with an empty voucher input field.

Can one please advise me on what is wrong with my code as I want the input fields with the “voucher-input” & “voucher-input2” to prompt up an error message when the field is empty

My code are as below. Many thanks

my javascript code: is intended to prompt up an error message if the voucher fields with the class voucher_input & voucher_input2 are empty - it currently only prompts up an error message for voucher_input and not 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 code: table-first with the input field <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 code: table-second with the input field <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

The error may be due to a duplicate ID on the page.

If both of these tables are on the same page the error block shouldn't have the same ID (popupErrorConfirmVoucherEmpty) as there should only be one ID on the page. Try changing the name of the second one to popupErrorConfirmVoucherEmpty2 and altering the JS accordingly