I have an input field and I want to give this field a validation that accepts only hex numbers. So it should accept numbers from 0 to 9 and letters from A to F.

Here is my input field:

<input type="text" class="form-control" tabindex="9" maxlength="2">

How do you think I can achieve this?

I have an input field and I want to give this field a validation that accepts only hex numbers. So it should accept numbers from 0 to 9 and letters from A to F.

Here is my input field:

<input type="text" class="form-control" tabindex="9" maxlength="2">

How do you think I can achieve this?

• javascript
• html
• validation
• hex

• Use the RegExpresion [xX][0-9a-fA-F]+ to check the input value – MuXeD Commented Dec 3, 2021 at 12:04
• 1 Try using input type="color" instead, a color picker.. for more details check this link – Anil Parshi Commented Dec 3, 2021 at 12:05
• How can I do that? @MuXeD – magic bean Commented Dec 3, 2021 at 12:06
• pattern="[0-9a-fA-F]+" should add this into my input field? @MuXeD – magic bean Commented Dec 3, 2021 at 12:12

3 Answers 3

You can use regex expression for your problem i write a simple example for your input

<input type="text" id="hex_code" name="hex_code" pattern="#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?" title="in valid hex code"><br><br>

another option is input type color like @groov_guy ment but you need to convert rgb values to hex like this post , so you need to set default value with hex format then when client change color you can get new hex code. a basic codes as below

<input type="color" onchange="printColor(event)" value="#ff0000">

function printColor(ev) {
  const color = ev.target.value;
  console.log(color) // you can get hex value
  
}

sample link

https://css-tricks./color-inputs-a-deep-dive-into-cross-browser-differences/

You can add the pattern attribute to the input. This won't prevent the user to write invalid information, but when submitting it will show a message. Also, you can add some styles to show that something is wrong before submit.

<input type="text" class="form-control" tabindex="9" maxlength="2" pattern="[0-9a-fA-F]+">

<style>
input:invalid {
  border: red solid 3px;
}
</style>

Try this

<input type="text" class="form-control" onchange="validate($event)" tabindex="9" maxlength="2">

And in your .js

validate(event) {
   let regEx = "^[-+]?[0-9A-Fa-f]+\.?[0-9A-Fa-f]*?$";
   let isHex = regEx.match(event.target.value);
   // Do things with isHex Boolean
}

EDIT: If you need to prevent you can do something like this

var input = document.getElementById('input');
input.addEventListener('keyup', (event) => {
  let regEx = /^[0-9a-fA-F]+$/;
  let isHex = regEx.test(event.target.value.toString());
  if(!isHex) {
    input.value = input.value.slice(0, -1);
  }
})

<input type="text" class="form-control" id="input" tabindex="9" maxlength="2">