JSFiddle - React, Tailwind, and code Playground

by sfoster

HTML

<form>
<p><label>Month picker (un-padded values)
<select class="mo" id="month-select">
  <option value="1">Jan</option>  
  <option value="2">Feb</option>  
</select></label>
</p>

<p><label>Month picker (padded values)
<select class="mo" id="month-select">
  <option value="01">Jan</option>  
  <option value="02">Feb</option>  
</select></label>
</p>

<p><label>Expiration month input: <input id="cc-exp-month" autocomplete="cc-exp-month" class="mo" minlength="2" required></label></p>
</form>

CSS

*:invalid {
  outline: 1px dotted red;
}

JavaScript

let ccData = {
	"cc-exp-month": 1,
};

let fields = Array.from(document.querySelectorAll(".mo"));
for (f of fields) {
	f.value = ccData["cc-exp-month"];
  f.checkValidity();
}