How to do form validation using JSON?

A

Andrey Shevelev2019-03-12 02:23:18

JavaScript

Andrey Shevelev, 2019-03-12 02:23:18

I'm doing form validation as a tutorial project. In HTML, I set the inputs, which I assigned the type, name and placeholder field. in the JS file at the input, in theory, there should be json with the rules for which input, which validation. I saw a lot of tutorials on the Internet with validation examples, but they either use jqueryValidation or schema, where there are already ready-made rules, etc. As far as I understand, this is something different from JSON. there, validation is presented something like this:
FIELD_NAME: validation function 1, validation function 2, etc.
but json doesn't have a function, i.e. you can't pass a function to it. This can be done with a normal Js object. how do i use json to write validation?

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container">
    <h3 class="form-title">Заполните форму</h3>

    <form id="register-form">
      <div id="form-group">
        <input type="number" placeholder="Целое число" name="form-integer" id="form-input">
      </div>

      <div id="form-group">
        <input type="number" placeholder="Дробное число" name="form-double" id="form-input">
      </div>

      <div id="form-group">
        <input type="number" placeholder="Число n-ой длины" name="form-limit-integer" id="form-input">
      </div>

      <div id="form-group">
        <input type="text" placeholder="Латинские символы" name="form-latin-symbol" id="form-input">
      </div>

      <div id="form-group">
        <input type="tel" placeholder="Номер телефона" name="form-tel" id="form-input">
      </div>

      <div id="form-group">
        <input type="email" placeholder="Адрес электронной почты" name="form-email" id="form-input">
      </div>

      <div id="form-group">
        <input type="password" placeholder="Пароль" name="form-password" id="form-input">
      </div>

      <div id="form-group">
        <input type="datetime" placeholder="Введите n-ую дату" name="form-datetime" id="form-input">
      </div>

      <div id="form-group">
        <input type="url" placeholder="Введите веб-адрес" name="form-url" id="form-input">
      </div>

      <div id="form-group">
        <button type="submit" id="form-btn">Отправить</button> 
      </div>
    </form>
  </div>

  <script src="script.js"></script>

</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Roman, 2019-03-12
@AndreiShev

There is json-schema for these purposes .
The description is given in the specification .
You can find out by reading a number of articles:
Googling json schema validator you can find a lot of reviews, guides, reviews and other useful information on your question