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

Question

I have a form, where user can optionally enter the birthday. I am using vue.js and sending the request with new FormData(). It gives me the error if I do not fill the birthday field [HTTP/1.0 400 BAD REQUEST 272ms] *errors Object { birthday: […] } * birthday [ "Not a valid date." ] 0 "Not a valid date." If I fill the field it works, but I want it to be optional.

Thank you.

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: ""
       },
      };
    },

Function for sending the request

      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

If it's possible in the backend maybe you can do it like this. And don't add the birthdayfield to the form

      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)
           }
         ......