JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<h3>Example 1 (Recommended)</h3>
<p>
	In this example we take advantage of the input type number, specifically the parameter step. The good thing about it is that it is <a href="http://caniuse.com/#feat=forms">widely supported</a> and works well on mobile devices.
</p>
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="amount">Amount (in dong)</label>
		<div class="input-group">
			<div class="input-group-addon">VND</div>
			<input class="form-control" type="number" name="amount1" id="amount1" min="100" step="100" placeholder="Amount" required>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Bid Now!</button>
</form>
<h3>Example 2</h3>
<p>
	Showing non-editable trailing 00 after the textfield. The input needs to be validated using JavaScript.
</p>
<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="amount">Amount (in dong)</label>
		<div class="input-group">
			<span class="input-group-addon">VND</span>
			<input class="form-control" type="text" pattern="\d*" oninvalid="this.setCustomValidity('Enter value in Dong')" oninput="setCustomValidity('')" name="amount2" id="amount2" placeholder="Amount" required>
			<span class="input-group-addon">.00</span>
		</div>
	</div>
	<button type="submit" class="btn btn-primary">Bid Now!</button>
</form>