Foolproof Unobtrusive Validierung

Question

Ich möchte zwei Datumsfelder mit Foolproof Validierung vergleichen, wobei das zweite Feld größer als das erste Feld sein muss. Beide können jedoch null sein. Selbst wenn PassOnNull = True verwendet wird, schlägt die Validierung fehl, wenn beide Felder null sind. Dies funktioniert wie erwartet mit [GreaterThanOrEqualTo], aber mein zweites Datum muss größer sein.

Bei der Betrachtung der Quelle wird die Validierung umgangen, wenn eines der Felder null ist (aber nicht beide). Gibt es Gründe dafür? Das ergibt für mich keinen Sinn. Ich kann die Quelle leicht ändern, aber als NuGet-Installation bin ich der Gnade ausgeliefert, dass sie überschrieben wird. Ansonsten kann ich es einfach manuell einbinden und fertig machen. Hier ist der Quelle-Schnipsel:

if (passOnNull) { 

     var isNullish = function (input) { 
      return input == null || input == undefined || input == ""; 
     }; 

     var value1nullish = isNullish(value1); 
     var value2nullish = isNullish(value2); 

     if ((value1nullish && !value2nullish) || (value2nullish && !value1nullish)) 
      return true; 
    } 

Die folgende Modifikation mehr Sinn für mich macht in fast jedes Szenario, das ich denken kann, da erforderliche Felder würden immer noch ihre eigene Validierung haben weitergeben müssen:

 if (value1nullish || value2nullish) 
      return true; 

Gibt es Eine andere Möglichkeit, das zu überprüfen, oder ist FoolProof nur eine Reparatur nötig?

Answer 1

können Sie nutzen .change() Ereignis, Array.prototype.every(), .eq(), .valueAsDate Eigenschaft input type="date", required Attribut an beiden input type="date" Elemente

var dates = $("input[type=date]"); 
 

 
dates.change(function(e) { 
 
    if (dates.get().every(function(el) { 
 
     return el.valueAsDate !== null 
 
     }) 
 
     && dates.eq(1)[0].valueAsDate > dates.eq(0)[0].valueAsDate) { 
 
     alert(true) 
 
    } else { 
 
     alert(false) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<form> 
 
    <input type="date" name="date1" required /> 
 
    <input type="date" name="date2" required /> 
 
    <input type="submit" /> 
 
</form>