How to use Javascript to check that user input includes a capital letter, lowercase letter, number and is between 8-12 characters?

Question

I am learning Javascript and having trouble with an assignment. I'm supposed to create Javascript code that checks if user input is valid. The instructions say

Ask the user to input their first name, last name, a UserID, and a birthdate in type date format. The UserID must contain an uppercase, a lowercase, a number, and be 8 to 12 chars long. Create a JS function to verify formats of the UserID field.You will need to use Loop For to iterate through your data fields character by character, and JS functions like char.toUpperCase() and parsInt(char) or RegExp() to validate the UserID format.

I have no idea how to do that. I have tried something like this

<form id = "myForm" action="">
  <label for="uid">User Id:</label>
  <input type="name" id="uid" name="uid"><br>
  <label for ="fname"> First Name:</label>
  <input type = "text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <label for ="birthday"> Birthday:</label>
  <input type="date" id="birthday" name = "birthday"><br>
  <input type="submit" id = "accept" value="Accept">
</form>

<div id = "validate">
</div>
<script>
form.onsubmit = function() {
  let uIdText = document.getElementById('uId');
  let pattern = \d;
  let result = pattern.test(uidText);
  if result = true {document.getElementById("validate").innerHTML = "Valid User ID"}
  else document.getElementById("validate").innerHTML = "UserID needs to include a number";
</script>

But that does not work, and it doesn't use a loop.

*UPDATE: I tried this

var uIdText = document.getElementById(uId).innerHTML;
var myForm = document.getElementById(myForm).innerHTML;
var result = document.getElementById(validate).innerHTML;
myForm.onsubmit = function validate(uIdText) {
  uIdLength();
  /regexp(?=.[a-z])(?=.\d)(?=.[A-Z]);
}
function uIdLength(uIdText){
  if uIdText.legth >=8 && <=12 == true;
    then result = "Form Submitted";
    else result = "Invalid User Id"
}
validate(uIdText);

but that also did not work.

See if you can adjust this by removing the lower case check... https://stackoverflow.com/a/1559788/294949 — danh, Jul 18 '22 at 21:24
@kevinSpaceyIsKeyserSöze but how would that fit into the context of the function? — user312341, Jul 20 '22 at 15:20

score 1 · Answer 1 · answered Jul 20 '22 at 15:37

1

The solution in writen in comments, you can add a pattern attribute inside your input :

<input type="text" id="fname" name="fname" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,12}">

answered Jul 20 '22 at 15:37

GregThB

283
1
7

But that doesn't answer my original problem. The question asks "Create a JS function to verify formats of the UserID field.You will need to use Loop For to iterate through your data fields character by character, and JS functions like char.toUpperCase() and parsInt(char) or RegExp() to validate the UserID format." – user312341 Jul 20 '22 at 21:39

kevinSpaceyIsKeyserSöze · Accepted Answer · 2022-07-21T07:53:57.437

Here is a small exapmle. There is a function validateUserId which returns true or false wheter the userid is valid or not.

After the validation a text is set to display a message to the user.

const validateUserId = (userId) => /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,12}$/.test(userId);

const form = document.getElementById("myForm");

form.onsubmit = (e) => {
  // stop page from reload
  e.preventDefault();
  
  // validate userid and set message
  if(validateUserId(e.target.elements.uid.value)) {
    document.getElementById("validate").innerHTML = "Valid User ID";
  } else {
    document.getElementById("validate").innerHTML = "User ID needs to include a number";
  }
  
}

form label {
  width: 80px;
  display: inline-block;
}

<form id="myForm" action="">
  <label for="uid">User Id:</label>
  <input type="name" id="uid" name="uid"><br>
  <label for="fname"> First Name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <label for ="birthday"> Birthday:</label>
  <input type="date" id="birthday" name = "birthday"><br>
  <input type="submit" id = "accept" value="Accept">
  <div id="validate"></div>
</form>

How to use Javascript to check that user input includes a capital letter, lowercase letter, number and is between 8-12 characters?

2 Answers2