2 Eingabefelder, die nicht benötigt werden, aber beide müssen ausgefüllt werden?

Question

Ich habe 2 Eingabefelder:

<div class="row"> 
    <div class="col-1-2"><input type="text" placeholder="Item 1" name="custom_item_1" id="custom-item-1"></div> 
    <div class="col-1-2"><input type="number" placeholder="Amount 1" name="custom_amount_1" id="custom-amount-1"></div> 
</div> 

sie nicht benötigt werden, aber wenn es Daten in einem ist dann beide ich brauche sie ...

der beste Weg, dies zu tun wäre ausgefüllt werden ein Muss am Ende der beiden Eingaben hinzufügen, wenn eines ausgefüllt wird?

Denken Sie daran, wie, dass ich schon JS verwenden, um dynamisch mehr row hinzufügen, mit Item/Betrag 2, 3, 4, etc ...

Ich bin nicht sicher, wie um dies zu realisieren.

---

Ich würde denken, den Workflow so gehen würde:

1) nach gefüllt werden, findet IDs von 'item' und 'Menge' - zB ... custom-item-1 und kunden Menge-1

2) hinzufügen ‚erforderlich‘ an die Eingänge mit den ids

---

Hier ist der Code, den ich verwende dynamisch row hinzufügen einhüllen es nützlich ist:

// add custom fields - add fields upon pressing button 
    var iCustom = 2; // starts at 2 because 1 is already present 
    function addCustomFields() { 
    var newRow = document.createElement('div'); 
    newRow.className = 'row'; 
    newRow.innerHTML = '<div class="col-1-2"><input type="text" placeholder="Item ' + iCustom + '" name="custom_item_' + iCustom + '" id="custom-item-' + iCustom + '"></div><div class="col-1-2"><input type="number" placeholder="Amount ' + iCustom + '" name="custom_amount_' + iCustom + '" id="custom-amount-' + iCustom + '"></div>'; 
    document.getElementById('section-add-custom-fields').appendChild(newRow); 
    iCustom++; 
    } 
    document.getElementById('add-custom-fields').addEventListener('click', addCustomFields); 

---

EDIT:

Schlusscode:

// requires both inputs to be filled 
    document.getElementById('form-button-submit').addEventListener('click', function() { 
    for (var i = 1; !!document.getElementById("custom-item-"+i); i++) { 
    var itemEntered = !!document.getElementById("custom-item-"+i).value, 
     amountEntered = !!document.getElementById("custom-amount-"+i).value; 
     if(itemEntered != amountEntered) { 
     document.getElementById("custom-item-"+i).required = true 
     document.getElementById("custom-amount-"+i).required = true 
     } 
    } 
    }); 

    <button type="submit" id="form-button-submit">Continue</button> 

Answer 1

würde ich gerade auf diesen Bestätigungscode in dem Ereignis-Listener von was auch immer Submit-Button Sie haben:

for(var i = 1; !!document.getElementById("custom-item-"+i); i++) { 
    var itemEntered = !!document.getElementById("custom-item-"+i).value, 
     amountEntered = !!document.getElementById("custom-amount-"+i).value; 
    if(itemEntered != amountEntered) { 

      // One was entered, but both weren't filled out 
      // so handle that situation accordingly 
    } 
} 

Ein bisschen Erklärung: !!turns stuff into boolean values. Daher wird die for-Schleife im Wesentlichen über alle Felder "benutzerdefinierter Artikel" durchlaufen, bis eine nicht vorhandene gefunden wird.

einige Optionen für das, was Sie tun können, den Fehlerfall in dem if-Anweisung zu handhaben:

• Fügen Sie eine Fehlermeldung auf die Felder
• den Absenden-Button deaktivieren nächste (obwohl dies fraglich benutzer- sein könnte Interface-Design)
• Somehow verhindern, dass der eigentliche Eingabecode läuft