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.
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}">
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>