JavaScript form validation 2 letters 1 number

Question

I'm trying to make a validation for my form with JavaScript. This is what I have done so far, and it works, but in the input "klassekode" needs to start with two letters and then one number.

My html code

<form class="form1" method="POST" id="registrerFagSkjema" action="registrerklasse.php" name="registrerFagSkjema"  onSubmit="return validerRegistrerFag()">


        Registrer klasse  <br> <br>
        Klassekode <br>
        <input value="" type="text" name="fagkode" id="fagkode"  onFocus="fokus(this)"
                onBlur="mistetFokus(this)" onMouseOver="musInn(this)" onMouseOut="musUt()"
                onChange="endreTilStoreBokstaver(this)"/ /><br>

        Klassenavn <br>
        <input value="" type="text" name="klassenavn" id="klassenavn"   onFocus="fokus(this)"
                onBlur="mistetFokus(this)" onMouseOver="musInn(this)" onMouseOut="musUt()"  />

        
        <input value="Registrer Klasse" type="submit" name="submit" id="submit" >
        <input type="reset" value="Nullstill" id="reset" name="reset" onClick="fjernMelding()">


</form>

 <div id="melding"></div>

My JavaScript code

function validate()

{
  var klassekode = document.getElementById("klassekode");
  var klassenavn = document.getElementById("klassenavn");
  var feilmelding="";
  //var firstTwoLetters = document.getElementById("klassekode").substring(0,2);

  if(klassekode.value.trim()=="")
  { 
    
    //alert("blank");
    feilmelding="Fyll ut Klassekode";
    document.getElementById("melding").style.color="red";
    document.getElementById("melding").innerHTML=feilmelding;

    klassekode.style.border = "solid 1px red";
    return false;
  }
  else if ( klassekode.value.trim().length!=3)
  {
    //alert("klassekode for lang");
    feilmelding="Klassekode må kun være 3 bokstaver";
    document.getElementById("melding").style.color="red";
    document.getElementById("melding").innerHTML=feilmelding;
    klassenavn.style.border = "solid 1px red";
    return false;
  }
  else if (klassenavn.value.trim()=="" )
  {
    //alert("blank");
    feilmelding="Fyll ut Klassenavn";
    document.getElementById("melding").style.color="red";
    document.getElementById("melding").innerHTML=feilmelding;
    klassenavn.style.border = "solid 1px red";
    return false;
  }
  else { return true;}
}

Answer 1

You got the hang of substring, and you can use that the newer method isNaN (Not a Number) and divide your third character with 1. If it's a letter, isNaN will return "true" and if it's a number, it will return "false".

---

I would, however, recommend you to learn regular expressions, as it will benefit you tremendously in the future.

You basically create a pattern and then test a string against that pattern. If you find a match, then it's correct. I made a snippet below to demonstrate:

function validateInput() {
  let inputElement = document.getElementById("namn");
  let divElement = document.getElementById("comment");
  
  var message = "not true";
  let inputValue = inputElement.value.trim();
  
  let pattern = new RegExp(/^[a-zøæ]{2}\d{1}/, "i");
  
  if (isValid(inputValue, pattern)) {
    message = "true"    
  }
  
  divElement.innerHTML = message;
}

function isValid(str, pattern) {
  return str.match(pattern);
}

<input id="namn" type="input" value="">

<input type="button" onclick="validateInput()" value="Validate" />

<div id="comment"></div>

This row needs explanation:

let pattern = new RegExp(/^\d{1}[a-zøæ]{2}/, "i");

The regular expression contains expressions that can be stringed together:
^: start at the beginning of the string.
[a-zøæ]{2}: 2 characters must be between a-z or contain ø or æ.
\d{1}: next following 1 character must be a digit.

The flag "i" makes the a-z case insensitive. Another way would be to don't add a flag, and instead write [a-zA-ZøØæÆ]

Answer 2

Regex to the rescue. You can add another else if statement as per the following:

else if (klassekode.value.trim().length !== 3) {
    // after checking whether the string length is 3 characters...
} else if (!klassekode.value.trim().match(/^[a-z]{2}\d/i)) {
    // apply validation warning styles
    return false;
}

An explanation of the Regex:
^ - asserts position at the start of the string
[a-z] - matches an alphabetic character
{2} - matches exactly twice
\d - matches a digit (0-9) once
i - case insensitive match

I am not checking the string length again because your previous condition accounts for it.

Ensure to trim() the value before using it (e.g. before sending it to the backend for processing, etc.), because otherwise the leading/trailing spaces will be retained.