HTML input field restricted with regular expression pattern

Question

I want to restrict the user input in an HTML input field.

It is a field which accepts the weight in decimal and the unit(kg, lbs, g, t etc).

Following are few sample input which are valid:

10.45 kg
125.5 kg
120.35 lbs
160 lbs
1200.16 g
24.6 t

I am using the JQuery plugin mentioned in the below URL: http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input

But it is not working with complex patterns. Can anyone please help me with the regular expression to achieve the result?

Find the complete code below:

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="/js/jquery/jquery-2.1.4.js" type="text/javascript"></script>
<script src="/js/jquery/jquery.filter_input.js" type="text/javascript"></script>

<script type="text/javascript">
<!--//

$(document).ready(function(){
   $('#input_2').filter_input({ regex: '\d+(?:.\d+)?\s(?:kg|lbs|t)' });
});

//-->
</script>

</head>

<body>

Weight: <input id="input_2" type="text" size="20" />

</body>
</html>

The RegExp itself shouldn't be difficult once you've determined exactly what your parameters are... what about ounces (oz)? Is 120.35 lbs really what you want? Mixing Imperial and Metric systems like that? As with any RegExp - work out what you really, really want first. — CD001
– CD001, Commented Oct 12, 2015 at 10:33
This will not work with the plug-in, here is an excerpt from its description: Only allowed characters will be inserted into input field, others will be silently dropped. It only checks 1 character at a time. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Oct 12, 2015 at 10:47
The code sample which I tried is available in the question itself. — DXB-DEV
– DXB-DEV, Commented Oct 12, 2015 at 10:58

Jeremy Jones · Accepted Answer · 2015-10-12 10:59:04Z

3

If using HTML5 is an option then you could just include a pattern attribute on the input, for example using the regex from Pranav C Balan:

<input type="text" name="weight" value="" pattern="^\d+(?:\.\d+)?\s*(?:kg|lbs|t)$" />

edited Oct 12, 2015 at 10:59

answered Oct 12, 2015 at 10:34

Jeremy Jones

5,7414 gold badges23 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phylogenesis · Accepted Answer · 2015-10-12 10:53:34Z

0

The below is not the correct answer in this instance. As @stribizhev commented, the plugin you are using does not allow complex regex validation. It checks each individual character you type in against the regex, rather than validating the field as a whole.

This sort of validation does not seem to possible with your plugin, unfortunately.

The following matches all your examples:

^\d+(\.\d+)?\s(g|lbs?|kg|t)$

This breaks down as follows:

^                # Matches start of string
\d+              # 1 or more digits
(\.\d+)?         # Optionally followed by a decimal point and more digits
\s               # Whitespace
(g|lbs?|kg|t)    # Any of g, lb, lbs, kg, t
$                # Match end of string

Example here (regex101.com).

edited Oct 12, 2015 at 10:53

answered Oct 12, 2015 at 10:34

Phylogenesis

7,90024 silver badges27 bronze badges

Collectives™ on Stack Overflow

HTML input field restricted with regular expression pattern

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related