pure-js-validator v1.0.2

Pure js validator

  yarn add pure-js-validator

    // импортируем валиадтор
    import { Validator } from 'js-form-validator/js-form-validator.js'
    // когда дом готов
    document.addEventListener('DOMContentLoaded', () => {
      // ищем все формы
      const forms = Array.from(document.getElementsByClassName('js-form-ajax'))
      // идем по ним
      forms.forEach(form => {
        // создаем новый инстанс валидатора, подвязав в него нашу форму
        const validator = new Validator(form, async function (err, is_valid) {
          // если форма валидна
          if (is_valid) {
            // берем метод с дата-атрибута
            const method = form.dataset.method
            // берем ссылку с дата-атрибута
            const action = form.dataset.action
            // получаем все с полей в виде форм даты
            const body = new FormData(form)
            // преобразовываем в JSON, смотря, что хочет сервер
            const value = Object.fromEntries(body.entries());
            // создаем запрос на тот action, что нашли
            const response = await fetch(action, {
              // с тем методом, что нашли. Сокращенная запись method
              method: method,
              // так надо
              headers: {
                'Content-Type': 'application/json;charset=utf-8',
              },
              // превращаем наш обьект с данными в строку. так надо
              body: JSON.stringify(value),
            });
            // если все ок
            if (response.ok) {
              // проверяем что нам ответил сервер
              let result = await response.json();
              form.reset()
            }
          }
        })
      })
    })

Есть 5 (основных) методов, доступные к использованию для запросов на сервер

• GET
  • Для получения данных
  • нет тела запроса
  • Если нужно что-то передать, добавляем гет-параметры в урлу
    • /api/v1/orders/list/``?status=new
    • /api/v1/orders/list/``?status=new&offset=15
• POST
  • чаще используется для создание чего-либо
  • можно оправить что угодно в формате FormData or JSON
• PUT
  • используется для ПОЛНОЙ замены изменяемого обьекты, например, личные данные пользователя. То что мы отправим этим методом полностью заменит текущие данные пользователя. Даже, если у пользователя есть телефон, имя и email, а путом мы передали только телефон.
• PATCH
  • используется для ЧАСТИЧНОЙ замены изменяемого обьекты, например, личные данные пользователя. То что мы отправим этим методом заменит только те данные пользователя, которые мы отправили. Даже, если у пользователя есть телефон, имя и email, а патчем мы передали только телефон.
• DELETE
  • Используется для удаления какой-то сущности на сервере
  • нет тела запроса
  • Если нужно что-то передать, добавляем в урлу
    • /api/v1/address/5/delete/

Пример Fetch-запроса, если у нас, не форма, а просто кнопка

   <a href='#' class='js-add-to-cart' data-id='5'> add to cart </a>


      // ссылка от серверного разработчика, куда отправить запрос, чтобы добавить товар в корзину
      const ADD_TO_CART = '/api/v1/cart/add/'
      // ищем все кнопки
      const btns = Array.from(document.getElementsByClassName('js-add-to-cart'))
      // идем по каждой
      btns.forEach(btn => {
        // навешиваем прослушиватель события клик и делаем ее асинхронной
        btn.addEventListener('click', async (e) => {
          // предотвращаем нативный поведение ссылки на клик и переход по href
          e.preventDefault()
          // собираем данные с кнопки, вариантично от требований сервера
          const value = {
            id: btn.dataset.id
          }
          // создаем запрос 
          let response = await fetch(ADD_TO_CART, {
            // метод тоже бекендер подскажет
            method: 'POST',
            // необходимые хедеры
            headers: {
              'Content-Type': 'application/json;charset=utf-8',
            },
            // превращаем наш обьект с данными в строку. так надо
            body: JSON.stringify(value),
          })
          console.log(response)
        })
      })
    

HTML. Apply «data-rule» attribute for each form element that you want to check, or the attribute value, specify the name of one or more rules.

Javascript. You need to create an instance of Validator and pass it two parameters:

Form handle Callback function Callback function has two arguments: err and res. If the form has a validation error, the argument err will be the Object, and if there are no errors - null. Argument res returns a boolean value (true or false) and there is always.

SETTINGS

*locale - location index for message object.

**messages - an object having the structure:

messages: {
	localeName: {
		RuleName1: {
			empty: 'Message text for empty value',
			incorrect: 'Message text for incorrect value'
		},
		RuleName2: {
			empty: 'Message text for empty value',
			incorrect: 'Message text for incorrect value'
		}
		//..
	}
}

***rules - an object having the structure:

rules: {
	myCustomRulename: function (value, params) {
		//Your code here..
		//The function should return a boolean value
		//true - if the filed
	}
}

RULES

For the attaching of the rules, you have to add the attribute «data-rule» to the form element, and as value is rule name

<input type="text" name="phone" data-rule="phone"/>

For a form element, you can use a few rules that are listed through the separator «|»

<input type="text" name="phone" data-rule="phone|required"/>

Some rules may have parameters. The parameters must be separated by the symbol «-»

<input type="text" name="count" data-rule="between-5-9"/>

LIST OF RULES

API