HTML5 - validate input field using pattern attributes

Question

How can I validate a form field upon submission before sending a request to the server that the serial number has this exact format :

 <input type="text" id="serial" placeholder="123AB-BCXH3-778F2-90763">

(20 Characters, seperated by - for every 5 characters )

Thanks

Answer

Previous title was : Javascript check string format

My question was how to validate with Javascript but Joe below gave a good example using regex expressions, I have never used Regex but this what i learned today :

^\w{5}-\w{5}-\w{5}-\w{5}$ Where my Serial format is 5 Characters followed by "-"

• \w => is any word Character a-z, A-Z, 0-9
• {5} => Count 5 Characters
• \- => backslash causes the metacharacter to be treated as a character, here "-"
• $ => end of string
• ^ => Starting position

Answer 1

Here is a functional fiddle

<form>
    <input type="pid"  id="pid" maxlength="23" pattern="^\w{5}\-\w{5}\-\w{5}\-\w{5}$" required value="123AB-BCXH3-778F2-90763" size="35"/>

    <input type="submit" value="Submit" />
</form>