<form data-validate novalidate>
  <div class="form-field">
    <label class="form-label" for="email">ایمیل</label>
    <input id="email" name="email" class="form-control" type="email" required data-rule="email" data-validate-live="true">
    <p class="field-feedback" hidden></p>
  </div>

  <div class="form-field">
    <label class="form-label" for="nationalId">کد ملی</label>
    <input id="nationalId" name="nationalId" class="form-control" data-rule="nationalId">
  </div>

  <div class="form-field">
    <label class="form-label" for="password">گذرواژه</label>
    <input id="password" name="password" class="form-control" type="password" required data-rule="password" data-min="8" data-password-field="#password-meter">
    <div class="password-meter" id="password-meter"><span data-password-bar></span><span data-password-bar></span><span data-password-bar></span><span data-password-bar></span><small data-password-label></small></div>
  </div>

  <div class="form-field">
    <label class="form-label" for="confirm">تکرار گذرواژه</label>
    <input id="confirm" name="confirm" class="form-control" type="password" required data-match="password">
  </div>

  <button class="btn btn-primary" type="submit">ذخیره</button>
</form>

import { validateForm, validateField } from './js/core/form.js';

const { valid, fields } = validateForm(form);
if (!valid) {
  console.log(fields.filter((item) => !item.valid).map((item) => item.field.name));
}

import { formMarkup, collectValues, openRecordForm } from './js/pages/kit.js';

const markup = formMarkup([
  { name: 'title', label: 'عنوان', required: true },
  { name: 'price', label: 'قیمت', type: 'number', rule: 'number' },
  { name: 'status', label: 'وضعیت', type: 'select', options: ['active', 'draft'] },
  { name: 'notes', label: 'توضیحات', type: 'textarea', col: 2, rows: 4 },
]);

<form data-validate novalidate>
  <div class="form-field">
    <label class="form-label" for="email">Email</label>
    <input id="email" name="email" class="form-control" type="email" required data-rule="email" data-validate-live="true">
    <p class="field-feedback" hidden></p>
  </div>

  <div class="form-field">
    <label class="form-label" for="nationalId">National ID</label>
    <input id="nationalId" name="nationalId" class="form-control" data-rule="nationalId">
  </div>

  <div class="form-field">
    <label class="form-label" for="password">Password</label>
    <input id="password" name="password" class="form-control" type="password" required data-rule="password" data-min="8" data-password-field="#password-meter">
    <div class="password-meter" id="password-meter"><span data-password-bar></span><span data-password-bar></span><span data-password-bar></span><span data-password-bar></span><small data-password-label></small></div>
  </div>

  <div class="form-field">
    <label class="form-label" for="confirm">Confirm password</label>
    <input id="confirm" name="confirm" class="form-control" type="password" required data-match="password">
  </div>

  <button class="btn btn-primary" type="submit">Save</button>
</form>

import { validateForm, validateField } from './js/core/form.js';

const { valid, fields } = validateForm(form);
if (!valid) {
  console.log(fields.filter((item) => !item.valid).map((item) => item.field.name));
}

import { formMarkup, collectValues, openRecordForm } from './js/pages/kit.js';

const markup = formMarkup([
  { name: 'title', label: 'Title', required: true },
  { name: 'price', label: 'Price', type: 'number', rule: 'number' },
  { name: 'status', label: 'Status', type: 'select', options: ['active', 'draft'] },
  { name: 'notes', label: 'Notes', type: 'textarea', col: 2, rows: 4 },
]);

<form data-validate novalidate>
  <div class="form-field">
    <label class="form-label" for="email">البريد الإلكتروني</label>
    <input id="email" name="email" class="form-control" type="email" required data-rule="email" data-validate-live="true">
    <p class="field-feedback" hidden></p>
  </div>

  <div class="form-field">
    <label class="form-label" for="nationalId">الرقم الوطني</label>
    <input id="nationalId" name="nationalId" class="form-control" data-rule="nationalId">
  </div>

  <div class="form-field">
    <label class="form-label" for="password">كلمة المرور</label>
    <input id="password" name="password" class="form-control" type="password" required data-rule="password" data-min="8" data-password-field="#password-meter">
    <div class="password-meter" id="password-meter"><span data-password-bar></span><span data-password-bar></span><span data-password-bar></span><span data-password-bar></span><small data-password-label></small></div>
  </div>

  <div class="form-field">
    <label class="form-label" for="confirm">تأكيد كلمة المرور</label>
    <input id="confirm" name="confirm" class="form-control" type="password" required data-match="password">
  </div>

  <button class="btn btn-primary" type="submit">حفظ</button>
</form>

import { validateForm, validateField } from './js/core/form.js';

const { valid, fields } = validateForm(form);
if (!valid) {
  console.log(fields.filter((item) => !item.valid).map((item) => item.field.name));
}

import { formMarkup, collectValues, openRecordForm } from './js/pages/kit.js';

const markup = formMarkup([
  { name: 'title', label: 'العنوان', required: true },
  { name: 'price', label: 'السعر', type: 'number', rule: 'number' },
  { name: 'status', label: 'الحالة', type: 'select', options: ['active', 'draft'] },
  { name: 'notes', label: 'الوصف', type: 'textarea', col: 2, rows: 4 },
]);