I have a textbox in my HTML form, and I would like to restrict a user to enter a hexadecimal value in it between 0 and f. How can I do it?

My HTML textbox code:

<div class="input-resp-hpux-vbus"><span><input  class="textbox" id="vbus-id" name="vbus-id" type="text" size="5" maxlength="3"  value="<?php if(isset($_POST['vbus-id'])) { echo htmlentities ($_POST['vbus-id']); }?>" /></span></div>

I have a textbox in my HTML form, and I would like to restrict a user to enter a hexadecimal value in it between 0 and f. How can I do it?

My HTML textbox code:

<div class="input-resp-hpux-vbus"><span><input  class="textbox" id="vbus-id" name="vbus-id" type="text" size="5" maxlength="3"  value="<?php if(isset($_POST['vbus-id'])) { echo htmlentities ($_POST['vbus-id']); }?>" /></span></div>

• javascript
• jquery
• html

• try this regex (0-9[A-F])+ – Praveen Commented Oct 10, 2013 at 9:36
• possible duplicate of JavaScript regular expressions - match a series of hexadecimal numbers – Praveen Commented Oct 10, 2013 at 9:37

2 Answers 2

You could use a regular expression and validate it before submit or after keypress:

Regular expression to validate hex string

var control = document.getElementById('vbus-id')';
var regExp = new RegExp(/^0x[0-9A-F]{1,4}$/i);
if (!regExp.test(control))
   alert('invalid');

Try this http://jsfiddle/zXbHz/,

<div class="input-resp-hpux-vbus"><span><input  class="textbox" id="vbus-id" name="vbus-id" type="text" size="5" maxlength="4" onblur="isValidhex(this)"  value="" /></span></div>

function isValidhex(ele) {
     var isOk  =  /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(ele.value);
    return (isOk)?ele.value ="" :true ;
}