Question 216173 in Html Question posted in
Some basic documentation can be found here.

Html – login username or email field required without validation

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 🙂

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    The solution by Ali Sheikhpour will display the invalid message when you press Enter in the empty field and then continue typing:

    enter image description here

    So the direction could be to imitate the email input in a shadow DOM. Works in the mobile Chrome. Should be tweaked for Firefox/Safari.

    enter image description here

    const shadow = $email.attachShadow({ mode: "open" });
const email = document.createElement('input');
email.type = 'email';
email.required = true;

const style = getComputedStyle($username);
const keys = Object.keys(style).filter(key => key.match(/D/));

Object.assign(email.style, {
  ...Object.fromEntries(keys.map(key => [key, style[key]])),
  position: 'absolute',
  color:'transparent',
  backgroundColor:'transparent'
});

email.addEventListener('input', e => $username.value = email.value);

setTimeout(() => email.focus());

$username.setAttribute('tabindex', '-1');

Object.assign($username.style, {
  pointerEvents: 'none',
});

shadow.appendChild(email);

$form.addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData($form);
  
  console.log(...data);
});
    .form-control{
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom:5px;
}
    <form id="$form">
<div id="$input" class="form-floating">
    <span id="$email"></span>
    <input id="$username" required autofocus type="text" class="form-control" 
    placeholder="username or email" name="username">
    <label for="$username">username or email</label>
    <div>
    <input id="password" required type="password" class="form-control" 
    placeholder="password" name="password">
    <label for="password">username or email</label>
    </div>
</div>
<button>Login</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search