时间戳

首页 > 解决方案 > 将 axios 验证错误显示到 html 模板

javascript - 将 axios 验证错误显示到 html 模板

问题描述

所以我有刀片 html 表单：

 <form action="/register" method="post" class="axios-form">
   <div error="email">
      <input name="email" type="email"/>
   </div>
   <div error="name">
      <input name="name" type="text"/>
   </div>
 <button type="submit">submit</button>
 </form

我正在通过 axios 提交此表单：

 document.querySelectorAll('.axios-form').forEach(el => {
        new Form(el);
  });

  export default class Form {
    constructor(el) {
        this.el = el;
        this.method = el.method;
        this.action = el.action;

        el.addEventListener('submit', e => {
            e.preventDefault();
            this.submit();
        });
    }

    async submit() {
        try {
            const formData = new FormData(this.el);
            const response = await http({
                method: this.method,
                url: this.action,
                data: formData,
            });
        } catch (e) {
            console.error(e);
        }
    }
}

我在 Laravel 控制器中进行了验证

public function store(Request $request)
    {
        $this->validate($request, [
            'name' => ['required', 'min:2', 'string'],
            'email' => ['required'],
        ]);

    }

我的问题是如何在将表单提交到我的 html 模板后显示我得到的任何验证错误？

标签： javascriptphphtml

解决方案

document.getElementById('reg-form').onsubmit = function (event) {
    const form = event.target;
    event.preventDefault();
    const formData = new FormData(form);
    event.preventDefault();
    axios.request({
        method: "post",
        url: "/register",
        data: formData
    }).then(function (response) {
        //....
    }).catch(function (error) {
        let inputs, errors, li, ul = form.querySelector('ul#form-errors');
        if (error.response.status === 422) {
            errors = error.response.data.errors;
            ul.innerHTML = '';
            inputs = form.getElementsByTagName("input");
            for (let error in errors) {
                errors[error].forEach(message => {
                    li = document.createElement("li");
                    li.className = 'error';
                    li.innerText = message;
                    ul.appendChild(li)
                });
                inputs[error].className = 'error';
            }
        }
    });
}
input {
    display: block;
    margin: 10mm;
}

.error {
    color: red;
    border-color: red;
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>

<body>
<form method="post" class="axios-form" id="reg-form">
    <ul id="form-errors"></ul>
    <div>
        <input name="email" type="email" id="email"/>
    </div>
    <div>
        <input name="password" type="text" id="password"/>
    </div>
    <button type="submit">submit</button>
</form>
<script src="https://unpkg.com/axios/dist/axios.js"></script>

</body>

</html>

推荐阅读