Hi,

I need to implement an additional input field to compare the email address on VendrChoutInformationPage.cshtml.

Since Vendr Checkout uses jQuery Validation I thought that it could not be to hard to implement. But I had so far no luck.

Here is what I have done so far:

First I added an Id to the form so that I can address it

@using (Html.BeginUmbracoForm("UpdateOrderInformation", "VendrCheckoutSurface", new { @id = "checkoutInformationForm" }))

Than I added an extra email2 input field to the form

<input name="email2" type="email" placeholder="Email check" class="block placeholder-gray-700 border border-gray-300 rounded py-2 px-4 mb-2 w-full"
       value="" required />

Than I added an extra Id to the existing email input field so I can address it

<input name="email" type="email" placeholder="Email" id="email" class="block placeholder-gray-700 border border-gray-300 rounded py-2 px-4 mb-2 w-full"
       value="@(currentOrder.CustomerInfo.Email)" required />

Than I added this code to VendrCheckoutInformationPage.cshtml

   @section foot
{
    <script>
        $(document).ready(function() {
            $("#checkoutInformationForm").validate({
                rules: {
                    email2: {
                        minlength: 1,
                        required: true,
                        equalTo: '#email'
                    }
                }
            });
        });
    </script>
}

It does not work.

Any ideas?