在 html 表单中输入日期后如何修复 400 错误请求错误？

Question

我有一个表单，用户可以在其中选择输入生日。我正在使用 vue.js 并使用新的 FormData() 发送请求。如果我不填写生日字段 [HTTP/1.0 400 BAD REQUEST 272ms] 它会给我错误 *错误对象{生日：[…]}* 生日[“无效日期。” ] 0“无效日期。” 如果我填写该字段，它会起作用，但我希望它是可选的。

谢谢。

HTML

<input
  id="birthday"
  v-model="newUser.birthday"
  class="form-control"
  placeholder="birthday (Opt)"
  type="date"
 />

Vue.js

  new Vue({
    el: "#app",
    delimiters: ["[[", "]]"],
    data() {
      return {
       newUser: {
         name: "",
         surname: "",
         email: "",
         title: "",
         birthday: "",
         employee_number: "",
         monthly_meal_limit: "",   
         max_meal_amount: ""
       },
      };
    },

发送请求函数

      sendInvite(newUser) {
        let inputCheck = this.validateBeforeSubmit(newUser);    
        
        if(inputCheck) {
        let fd = new FormData();
        
        fd.append("name", newUser.name);
        fd.append("surname", newUser.surname);
        fd.append("email", newUser.email);
        fd.append("title", newUser.title)
        fd.append("employee_number", newUser.employee_number)
        fd.append("birthday", newUser.birthday)
        
        let token = this.getCsrfToken()
        const headers = new Headers({
          "X-CSRFToken": token
        })

       
        //send  the request with the formdata
        let req = new Request(apiPath, {
            body: fd,
            headers,
            method: "POST"

        });
        fetch(
            req)
        .then((response) => response.json())
        .then((data) => {
          this.addNewForm = false,
            this.newUser = {
              name: "",
              surname: "",
              email: "",
              title: "",
              employee_number: 0,
              birthday: ""
            },
            this.getInvites()
        })
            .catch((error) => console.log("error", error));
        }
    }

Answer 1

如果后端可行的话，也许你可以这样做。并且不要将 birthdayfield 添加到表单

      let inputCheck = this.validateBeforeSubmit(newUser);    
            
            if(inputCheck) {
            let fd = new FormData();
            
            fd.append("name", newUser.name);
            fd.append("surname", newUser.surname);
            fd.append("email", newUser.email);
            fd.append("title", newUser.title)
            fd.append("employee_number", newUser.employee_number)
        
           if(newUser.birthday && newUser.birthday.length > 0){
            fd.append("birthday", newUser.birthday)
           }
         ......

在 html 表单中输入日期后如何修复 400 错误请求错误？

How to fix 400 bad request error after having date input in html form?

javascript

forms

input

form-data

vue.js