Trang chủ
Step form
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<form id="f"> <div class="s a"> <h2>1</h2> <input type="text" id="n" placeholder="Name" /> <div id="e-n" class="e"></div> <button type="button" onclick="nx(0)">Next</button> </div> <div class="s"> <h2>2</h2> <p>Welcome!</p> <button type="button" onclick="pv(1)">Prev</button> <button type="submit">Send</button> </div> </form>
CSS
Copy
.s{display:none} .s.a{display:block} .e{color:red;font-size:14px}
JS
Copy
const s=document.querySelectorAll('.s') function sh(i){ s.forEach((x,j)=>x.classList.toggle('a',j===i)) } function nx(c){ if(c===0) ck().then(v=>{if(v) sh(c+1)}) } function pv(c){sh(c-1)} async function ck(){ const n=document.getElementById('n').value.trim() const e=document.getElementById('e-n') if(!n){e.textContent='Need name';return!1} e.textContent='Checking...' try{ const r=await fetch(`https://jsonplaceholder.typicode.com/users?username=${n}`) const d=await r.json() if(d.length){e.textContent='';return!0} e.textContent='Not found';return!1 }catch{e.textContent='Err';return!1} }