login username or email field required without validation

Question

I have a simple login form with username/email and password fields, and two buttons, one for a normal login and one for LDAP login. The normal login requires email/pwd, while the LDAP login requires username/pwd

I already have it working with a input-text field but I've discovered that input-email helps mobile user to have a specialized keyboard with @ and . as shortcuts.

What's the easiest way to achieve that mobile friendly keyboard? My idea was to somehow use input-email and disable validation, but I'd still like to maintain the automatic "required" validation

<div class="form-floating">
    <input required autofocus type="text" class="form-control" 
    id="username" name="username" placeholder="username or email">
    <label for="username">username or email</label>
</div>

Ignore bootstrap for the purpose of the final result :)

Answer 1

Set the initial type to email (have the benefit of user friendly keyboard) and alter the type on button click to text/email accordingly to remove the restriction on submit if needed:

<form>
<div class="form-floating">
    <input required autofocus type="email" class="form-control" 
    id="username" name="username" placeholder="username or email">
    <label for="username">username or email</label>
</div>
<input type="submit" value="normal" onclick="document.getElementById('username').setAttribute('type','email')">
<input type="submit" value="LDAP" onclick="document.getElementById('username').setAttribute('type','text')">
</form>