CODEWITHSUNDEEP
javascriptjqueryregex
Tom
Tom

Reputation: 1628

Validate MAC Address onkeyup

I'm trying to validate a form field for MAC Addresses.

I've got this which works.

$('body').on('keyup', '#macAddess', function(e){
    var e = $(this).val();
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
    str = e.replace(/[^a-f0-9]/ig, "");
    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }
    e = str.slice(0, 17);
    $(this).val(e)
});

As the user is typing it's formatting the MAC Address, adding : after every pair of characters. It will only allow a-f and 0-9 so no invalid characters are being added.

I'd like to expand on it a little.. As the user is entering the MAC address I want a class adding to input showing it is wrong, until a fully formed MAC address is entered.

eg:

if (MAC is invalid) $('#' + id).addClass('badMac')

So if the user is entering a value the class will be added and only removed when a fully formed and valid mac is entered.

I'd like to keep in all with in the on('keyup') function.

How do I test if it is invalid and then set the class ?

Upvotes: 3

Views: 8117

Answers (4)

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

You can test it with a regular expression that checks if the MAC address is valid:

var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;
var mac_address = $(this).val();
if(regexp.test(mac_address)) {
    //valid!
} else {
    //invalid!
}

Note that if you write this on keyup event, you'll obtain the invalid statement till the user writes a whole valid MAC address.

Edit

Snippet working:

var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;
var mac_address = "fa:09:91:d5:e4:5a";
if(regexp.test(mac_address)) {
    console.log("Valid: "+ mac_address);
} else {
    console.log("Invalid: "+ mac_address);
}

So try this code:

$('body').on('keyup', '#macAddess', function(e){
    var e = $(this).val();
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
    str = e.replace(/[^a-f0-9]/ig, "");
    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }
    e = str.slice(0, 17);
    $(this).val(e);

    var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;
    var mac_address = $(this).val();
    if(regexp.test(mac_address)) {
        //valid!
    } else {
        //invalid!
    }

});

Upvotes: 8

xxxmatko
xxxmatko

Reputation: 4142

I recommend you to use input event, which will also handle use cases when user uses Ctrl+C, Ctrl+V to input the MAC address, also together with the validation the code should look like this:

$(function() {
    var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}?)+$/i;

    $("#macAddess").on("input", function(e) {
  	var tb = $(this);
        var val = tb.val().replace(/[^a-f0-9]/ig, "");
        var r = /([a-f0-9]{2})([a-f0-9]{2})/i;
        while (r.test(val)) {
            val = val.replace(r, '$1' + ':' + '$2');
        }
        val = val.slice(0, 17);
        tb.val(val);    
        tb.toggleClass("badMac", !regexp.test(tb.val()));
    });
});
.badMac {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="macAddess" />

Upvotes: 3

Vladu Ionut
Vladu Ionut

Reputation: 8193

function isValidMac(mystring){
  var regex = /^([0-9A-F]{2}[:-]){5}([0-9A-F]{2})$/;
  return regex.test(mystring);
  }
  
 $('body').on('keyup', '#macAddress', function(e){
    var e = $(this).val();
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
    str = e.replace(/[^a-f0-9]/ig, "");
    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }
    e = str.slice(0, 17);
    $(this).val(e)

    $("#macAddress").toggleClass("badMac",!isValidMac(e));
    
});
input.badMac {

  background-color : red; 

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input id="macAddress">

Upvotes: 3

Marcel Dieterle
Marcel Dieterle

Reputation: 335

You can use jQuery´s toggleClass() with a bool value. In this case with the return value of your regex test.

$('body').on('keyup', '#macAddess', function(e){
    var input = $(this).val();
    var regexp = /^(([A-Fa-f0-9]{2}[:]){5}[A-Fa-f0-9]{2}[,]?)+$/i;

    $("#your-input-id").toggleClass("valid", regexp.test(input));
});

Upvotes: 1

Related Questions