Generate Username

Generate username from first and last name using jQuery. This example works with the third party API from Microsoft Azure AD B2C API.

by Amy Ruddy

HTML

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">


<div class='container py-5' id="api">
  <div id="banner-message">
  <p class='lead'><span class="fas fa-user-plus"></span> Generate Username</p>
    <p><small>Generate a username from the first letter of the first name combined with the full last name.</small></p>

  <hr>
   <ul>
     <li class="TextBox">
       <div class="attrEntry">
         <label for="FirstName">First Name </label>
         <div class="error itemLevel" aria-hidden="true"><p></p></div>
         <input id="FirstName" class="textInput" type="text" title="Your given name (also known as first name)." aria-label=", First Name" required="required">
       </div>
     </li>
     <li class="TextBox">
       <div class="attrEntry">
         <label for="LastName">Last Name </label>
         <div class="error itemLevel" aria-hidden="true"><p></p></div>
         <input id="LastName" class="textInput" type="text" title="Your given name (also known as first name)." aria-label=", Last Name" required="required">
       </div>
     </li>
     <li class="TextBox">
       <div class="attrEntry">
         <label for="UserId">Username </label>
         <input id="UserId" class="textInput" type="text" pattern="^[a-zA-Z0-9]+[a-zA-Z0-9_-]{3,64}$" required="" aria-required="true" aria-label="The username you provided is not valid. It must begin with an alphabet or number and can contain alphabets, numbers and the following symbols: _ -, Username">
       </div>
    </li>
   </ul>
</div>
</div>

CSS

body {
  font-family: Helvetica;
}

#api {
  max-width: 450px;
  margin: 0 auto;
}

.error {
  display: none;
}

ul {
  padding-inline-start: 0;
}

li {
  list-style-type: none;
}

JavaScript

// Generate Username | Azure API ID's ==> #FirstName #LastName #UserId
        function generateUsername() {
        	// Using first letter of first name
          var firstName = $('#FirstName').val().substring(0, 1).toLowerCase();
          // Using first letter of first name

          var lastName = $('#LastName').val().toLowerCase();
          var username = firstName + lastName;
          $('#UserId').val(username);
        }

        $('#FirstName').on('keyup', generateUsername);
        $('#LastName').on('keyup', generateUsername);
 
 // Add bootstrap classes to the form.
 $('#api ul li').addClass('form-group');
 $('#api input').addClass('form-control');