raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle required attribute on input for PaymentMethod controller

Browse Source 
This is done for one reason : do not submit form with required attribute on input that are actually hidden ; this is not handle correctly by browsers.

This idea here is to add/remove the required attribute on each input if the form is visible or not.
This commit is contained in:
Jean-Baptiste Bellet
2021-11-17 11:46:59 +01:00
committed by Matt-Yorkley
parent 3063b041d1
commit 7159cc3ff1
2 changed files with 66 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
spec/javascripts/stimulus/paymentmethod_controller_test.js
View File

@@ -13,16 +13,16 @@ describe("PaymentmethodController", () => {
<span id="paymentmethod_2" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod2" />
<span id="paymentmethod_3" data-action="click->paymentmethod#selectPaymentMethod" data-paymentmethod-id="paymentmethod3" />
<div class="paymentmethod-container" id="paymentmethod1"></div>
<div class="paymentmethod-container" id="paymentmethod2"></div>
<div class="paymentmethod-container" id="paymentmethod3"></div>
<div class="paymentmethod-container" id="paymentmethod1"><input type="number" required id="input1" /></div>
<div class="paymentmethod-container" id="paymentmethod2"><input type="number" required="true" id="input2" /></div>
<div class="paymentmethod-container" id="paymentmethod3"><input type="number" id="input3" /></div>
</div>`;
const application = Application.start();
application.register("paymentmethod", paymentmethod_controller);
});
it("fill the right payment description", () => {
it("fill the right payment container", () => {
const paymentMethod1 = document.getElementById("paymentmethod_1");
const paymentMethod2 = document.getElementById("paymentmethod_2");
const paymentMethod3 = document.getElementById("paymentmethod_3");
@@ -45,5 +45,38 @@ describe("PaymentmethodController", () => {
expect(paymentMethod2Container.style.display).toBe("none");
expect(paymentMethod3Container.style.display).toBe("block");
});
it("handle well the add/remove on 'required' attribute on each input", () => {
const paymentMethod1 = document.getElementById("paymentmethod_1");
const paymentMethod2 = document.getElementById("paymentmethod_2");
const paymentMethod3 = document.getElementById("paymentmethod_3");
const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
const input3 = document.getElementById("input3");
paymentMethod1.click();
expect(input1.required).toBe(true);
expect(input2.dataset.required).toBe("true");
expect(input2.required).toBe(false);
expect(input3.required).toBe(false);
paymentMethod2.click();
expect(input2.required).toBe(true);
expect(input1.dataset.required).toBe("true");
expect(input1.required).toBe(false);
expect(input3.required).toBe(false);
paymentMethod3.click();
expect(input1.required).toBe(false);
expect(input2.required).toBe(false);
expect(input3.required).toBe(false);
paymentMethod1.click();
expect(input1.required).toBe(true);
expect(input2.dataset.required).toBe("true");
expect(input2.required).toBe(false);
expect(input3.required).toBe(false);
});
});
});