JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<label for="advanced" class="advanced">
<input id="advanced" type="checkbox" name="advanced" />
<span>Input Rates and Fees manualy</span>
</label>

<br><br>

<fieldset class="ofau">
<legend>Only for advanced users</legend>

<label for="advanced" class="advanced">
<input id="advanced" type="checkbox" name="advanced" />
<span>Input Rates and Fees manualy</span>
</label>

</fieldset>

<!--
<input id="amount" class="amount" type="tel" name="amount" value="£ " />
<a href="#" onclick="check_me()">
check
</a>

-->

CSS

.ofau {color:#666666;padding:5px 10px 10px 5px;border:1px solid #999999;}
.ofau legend {padding:0 5px;}



.advanced {display:flex;-webkit-align-items: center;align-items: center;gap:6px;color:#666666;border:0;padding:0;}  
.advanced span {color:#666666;}  
.advanced:hover {cursor:pointer;} 
.advanced input[type=checkbox]:focus {outline:none;}

.advanced input[type=checkbox] {background-color: #ffffff;border:1px solid #999999;border-radius: 2px;
appearance: none;-webkit-appearance: none;-moz-appearance: none;width: 17px;height: 17px;cursor: pointer;
position: relative;padding:0;margin:0;}

.advanced input[type=checkbox]:checked {border:1px solid #999999;background-color: #409fd6;-webkit-box-shadow: inset 0 0 0 2px white;box-shadow: inset 0 0 0 2px white;}

JavaScript

function check_num(y) {
  // Get the value of the input field with id="numb"
const x = document.getElementById(y).value;

if (x.length < 3) {var z = "false";return z;}

for (const char of x) {
    if (!isNaN(char) || char === " " || char === "£" || char === "," ) {
	var z = "true";
        
    }
    else {var z = "false";return z;break;}
}
return z;
}

function check_me() {
if (check_num('amount') === "false") {
                alert("Amount required");
            } else {
              // OpenTray();
			  // loadDoc(this);
        alert("Yay!");
            }
            
            }