Angularjs: Validation for Mac address not working

Question

I have a form to add device mac address and wifi mac address, but I like to put a validation for the input-form, just to accept alphanumeric values on this pattern 'xx:xx:xx:xx:xx:xx'.

I originally did the validation for IP address and it worked fine like shown below:

<label class="input">
<input type="text"
name="textreadOnlyInfoWiFiIPAddress"
ng-model="readOnlyInfo.WiFiIPAddress"
ng-value="readOnlyInfo.WiFiIPAddress"
ng-pattern='/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/'
ng-model-options="{ updateOn: 'blur' }"
placeholder='xxx.xxx.xxx.xxx'>
</label>

Now I am trying to implement the same method for Mac addresses:

<input type="text"
name="textreadOnlyInfoWifiMACAddress"
ng-model="readOnlyInfo.WifiMACAddress"
ng-value="readOnlyInfo.WifiMACAddress"
ng-pattern='/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/'
ng-model-options="{ updateOn: 'blur' }"
placeholder='xx:xx:xx:xx:xx:xx'>
</label>

and it is not working as expected, How ng-pattern for mac address in this case?

Sami · Accepted Answer · 2022-02-02 08:39:27Z

I figured the answer below:

<input type="text"
name="textreadOnlyInfoMACAddress"
ng-model="readOnlyInfo.MACAddress"
ng-value="readOnlyInfo.MACAddress"
ng-pattern="/[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]{2}/"
ng-model-options="{ updateOn: 'blur' }"
placeholder='xx:xx:xx:xx:xx:xx'>
</label>

This following patterns make sure the MAC address is accepted with capitals and numerical value (alphanumeric format).

ng-pattern="/[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]{2}\:[A-F0-9]

An example of a MAC address: "00:1A:7B:0F:4E:4N" which require the above pattern.

However when the MAC address contains lowercase like this one "r0:h1:nc:23:5a:53", then the following pattern is required:

ng-pattern="/[a-f0-9]{2}\:[a-f0-9]{2}\:[a-f0-9]{2}\:[a-f0-9]{2}\:[a-f0-9]{2}\:[a-f0-9]{2}/"

Collectives™ on Stack Overflow

Angularjs: Validation for Mac address not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related