HTML pattern und readonly /disabled kombinieren oder bitte um anderen Lösungsvorschlag

[Dasun]

Guten Abend/ Morgen,

ich habe derzeit folgendes Problem:


Ich habe 11 Inputs, bei den über ein Javascript die Value's über einen Handler ausgelesen werden und zusammen addiert in ein 12. Input hineingeschrieben werden.

So wird nach jeder Änderung eines Inputs der Wert neu berechnet.

Dieses 12. Input soll nicht vom Inhalt geändert werden, weswegen es das Attribut "readoly" besitzt.

Nun habe ich in den anderen 11 Inputs einen pattern implementiert, damit dort nur Zahlen eingegeben werden können.


Dies funktioniert auch soweit.

Nun zu meinem Problem:


Ich möchte vor dem klicken auf den Absende-Button checken, ob der Wert des 12. Input auch 100 (Prozentualle Verteilung über die 11 Inputs) ist. Ich dachte mir dabei, dass ich dies auch eibnfach über ein Pattern realisiere. Jedoch schaffe ich es nicht, die Attribute pattern und readonly/disabled zu kombinieren.

Einzeln funktioniert der Pattern und das readonly, doch zusammen kombiniert wird das pattern ignoriert:

Hier ein Beispiel: http://jsfiddle.net/Qh2jd/4/

Deswegen meine Frage, ob jemand einen Tip für mich hat, wie ich meine Problemstellung realisieren kann ?


Danke und Gruß,

Sebastian

 

[Yuuri]

Constraint validation: If the readonly attribute is specified on an input element, the element is barred from constraint validation.

Bei disabled wird es das Selbe in grün sein (wozu etwas validieren, was eh nicht manuell eingetragen werden kann?). Das pattern würde ich allerdings manuell in JS und serverseitig umsetzen, da bspw. alles unter dem IE 10 das Attribut nicht unterstützt.