Added HTML5 form.reportValidity() to login screens

This improves browser feedback on form errors
This commit is contained in:
djmaze 2021-03-23 11:28:36 +01:00
parent 612aff4b27
commit cca0fc15da
5 changed files with 74 additions and 105 deletions

View file

@ -18,10 +18,9 @@
<div class="controls plugin-mark-Login-TopControlGroup"
data-bind="css: {'error': emailError}">
<div class="input-append">
<input type="email" class="input-block-level inputEmail"
name="RainLoopEmail" id="RainLoopEmail"
autofocus=""
autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
<input required="" type="text" class="input-block-level inputEmail"
pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
autofocus="" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: email, disable: submitRequest"
data-i18n="[placeholder]GLOBAL/EMAIL" />
<span class="add-on">
@ -31,8 +30,7 @@
</div>
<div class="controls" data-bind="css: {'error': passwordError}">
<div class="input-append">
<input type="password" class="input-block-level inputPassword"
name="RainLoopPassword" id="RainLoopPassword"
<input required="" type="password" class="input-block-level inputPassword"
autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: password, disable: submitRequest"
data-i18n="[placeholder]GLOBAL/PASSWORD" />
@ -46,11 +44,12 @@
<div class="controls"
data-bind="visible: additionalCodeVisibility(), css: {'error': additionalCodeError}">
<div class="input-append">
<input type="text" class="input-block-level inputAdditionalCode" autocomplete="off"
autocorrect="off" autocapitalize="off" spellcheck="false" style="padding-right: 35px;"
<input type="text" class="input-block-level inputAdditionalCode"
inputmode="numeric"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="padding-right: 35px;"
data-bind="textInput: additionalCode, disable: submitRequest"
data-i18n="[placeholder]LOGIN/LABEL_VERIFICATION_CODE" />
<span class="add-on fontastic">🔑</span>
<span class="add-on"><i class="fontastic">🔑</i></span>
</div>
</div>
<div class="controls plugin-mark-Login-BottomControlGroup"
@ -63,7 +62,7 @@
}
}"></div>
</div>
<div class="controls controls-submit-wrp" data-bind="hidden: hideSubmitButton">
<div class="controls" data-bind="hidden: hideSubmitButton">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand">
<span class="i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN"></span>
</button>