Generate Usernames with JavaScript: Working with Short Last Names

When generating usernames, one thing to consider is the length of the username. The code from last week's post may be problematic if you're looking for the username to be five characters or more and the user's last name is only two characters. After tacking on the first initial, you would only have three characters. So let's look at getting closer to the desired results.

Base Code

Last week (Using JavaScript to Dynamically Generate the Username within an HTML Form) we utilized the first and last name fields of an HTML form to generate a username with JavaScript.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
     document.form.username.value = username;
}" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Updated Code

The code works for the most part. However, there may be issues with users with short last names. If we're looking for a username that's at least five characters and a login is being created for Lama Su, we'll need to perform an extra test to see if the last name is at least four characters long. If it is, the username would be created as normal.

...
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = '';
     if(document.form.lname.value.length >= 4) {
          username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     }
     username = username.replace(/\s+/g, '');
...

For those with shorter last names, we use the entire last name, plus up to three letters of the first name.

...
     if(document.form.lname.value.length >= 4) {
          username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     } else {
          username = document.form.fname.value.substr(0,4) + document.form.lname.value.substr(0,49);
     }
     username = username.replace(/\s+/g, '');
...

Final Code

Adding the following code to an HTML file should provide a working example of the JavaScript solution.

<form method="post" name="form" action="">
<div><label for="fname">First Name: </label><input type="text" name="fname" id="fname" /></div>
<div><label for="lname">Last Name: </label><input type="text" name="lname" id="lname" onblur="
if(document.form.username.value=='' && document.form.fname.value!='' && document.form.lname.value!='') {
     var username = '';
     if(document.form.lname.value.length >= 4) {
          username = document.form.fname.value.substr(0,1) + document.form.lname.value.substr(0,49);
     } else {
          username = document.form.fname.value.substr(0,4) + document.form.lname.value.substr(0,49);
     }
     username = username.replace(/\s+/g, '');
     username = username.replace(/\'+/g, '');
     username = username.replace(/-+/g, '');
     username = username.toLowerCase();
     document.form.username.value = username;
}" /></div>
<div><label for="username">Username: </label><input type="text" name="username" id="username" /></div>
</form>

Conclusion

The updated code may be crude, but it gets the job done. When creating a login for someone with a short last name, the username will include more of the first name. There are more improvements that could be made. We could, for example, dynamically include letters from the first name based on how many characters are needed to fulfill the five character minimum. Who knows, maybe that will be a topic for a future post.