فرم‌ها و اعتبارسنجی

<div class="field">
  <input id="email" name="email" type="email" placeholder=" "
         autocomplete="email" data-rule="email" dir="ltr">
  <label for="email">ایمیل</label>
  <div class="msg" role="alert"><span></span></div>
</div>

<div>
  <div class="field">
    <input id="pw" name="password" type="password" placeholder=" "
           autocomplete="new-password" data-rule="pass">
    <label for="pw">رمز عبور</label>
    <button type="button" class="eye" aria-label="نمایش رمز" aria-pressed="false">
      <svg class="ic" aria-hidden="true"><use href="#i-eye"/></svg>
    </button>
    <div class="msg" role="alert"><span></span></div>
  </div>
  <div class="meter" data-s="0" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
</div>
<div class="field">
  <input id="pw2" name="password_confirmation" type="password" placeholder=" "
         data-rule="pass" data-match="#pw">
  <label for="pw2">تکرار رمز عبور</label>
  <div class="msg" role="alert"><span></span></div>
</div>

<div class="cb">
  <label class="check">
    <input type="checkbox" name="terms" required>
    با <a href="#" data-modal="terms">قوانین و شرایط</a> موافقم
  </label>
  <div class="msg" role="alert"><span></span></div>
</div>

<script src="../assets/js/mehmannavaz.js"></script>
<script>
  Mehmannavaz.addRule("username", v =>
    /^[a-z0-9_]{3,20}$/.test(v) || "نام کاربری ۳ تا ۲۰ نویسه (حرف کوچک، عدد و _) باشد");
</script>

<input id="u" name="username" data-rule="username" placeholder=" ">

<div class="otp" role="group" aria-label="کد ۶ رقمی"
     data-purpose="reset" data-next="reset-password.html">
  <input inputmode="numeric" maxlength="6" autocomplete="one-time-code" aria-label="رقم ۱">
  <input inputmode="numeric" maxlength="6" autocomplete="off" aria-label="رقم ۲">
  <!-- ... تا رقم ۶ -->
</div>
<p class="timer center">ارسال دوباره کد تا <span data-timer></span> دیگر</p>
<button class="linkbtn" type="button" data-resend>ارسال دوباره کد</button>

<div class="steps" aria-hidden="true"><i></i><i></i><i></i></div>
<form data-steps data-endpoint="register" data-next="success.html" novalidate>
  <div class="panel on stack">
    ...
    <button class="btn" type="button" data-next-step><span class="lbl">ادامه</span></button>
  </div>
  <div class="panel stack">
    ...
    <button class="btn ghost" type="button" data-prev-step><span class="lbl">قبلی</span></button>
  </div>
</form>