I have this form:
<div id="account-form">
<form action="/Account/Login" id="login-form" class="form" method="post">
<div id="input-fields">
<div>
<input class="data-entry medium-margin" id="UserName" name="UserName" placeholder="Username (or guest)" required="required " size="25" type="text" value="">
</div>
<div>
<input class="data-entry medium-margin" id="Password" name="Password" placeholder="Password (or guest)" required="required " size="25" type="password">
</div>
<div>
<input class="data-entry inline-checkbox" id="RememberMe" name="RememberMe" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">
<p style="margin-top: 0;">Remember me?</p>
</div>
</div>
<button class="data-entry medium" id="login" type="submit">Login</button>
<button class="data-entry medium" id="register" type="button" onclick="location.href='/Account/Register'">Register</button>
</form>
</div>
and this javascript that disables the inputs after the form submit.
<script type="text/javascript">
(function() {
document.getElementsByClassName('form')[0]
.addEventListener("submit", function () {
var inputs = document.getElementsByClassName("data-entry");
for (i = 0; i < inputs.length; i++) {
inputs[i].disabled = true;
}
})();
</script>
When I enter login data and then click submit the inputs are disabled and the submit verification fails saying that the input fields are not filled out.
Is there some way I can disable the input fields after HTML5 verification?