JSFiddle - React, Tailwind, and code Playground

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<div id="app">
  <input type="text" id="phone">
  <div class="msg-box">
    $$msg
    </div>
</div>

JavaScript

let myState = state({
  msg: '',
  userInput: ''
})

dom('.msg-box').css('color: red').bind(myState)

dom('#phone').on('input', () => {
  myState.userInput = dom('#phone').val().trim()
})

watch(() => myState.userInput, value => {
  if (value.length === 0) {
    myState.msg = ''
  } else if (!value.startsWith('+998')) {
    myState.msg = 'Phone must start with +998'
  } else {
    myState.msg = ''
  }
})