-1

我的代码在提交之前验证表单中的所有字段是否都已填写时遇到问题。我尝试在我的事件侦听器中放置一个 if 语句，但它似乎不起作用。我想知道是否有人知道如何实现这一目标。我查看了 W3 和其他示例，但它们似乎不起作用。这是我的代码。我也不想通过 HTML 验证来执行此操作，因为很容易进入开发工具并删除 input 元素的 required 属性。任何帮助，将不胜感激。我还附加了 CSS 用于样式目的。

var form = document.querySelector("#user_form");

    let reqHeaders = {
        headers: {
            Authorization: "Bearer ",
        }
    }

    let url = "https://api.airtable.com/v0/appMPvHoTHviahyfz/email-list"

    let reqData = {
        records: [
            {
                fields: null
            }
        ]
    }

    let formData = {
        firstName: "",
        lastName: "",
        email: ""
    }

    function logData(id, dataObj, value) {

        dataObj[id] = value;

        console.log(value)
    }

    form.addEventListener("submit", function (e) {
        e.preventDefault();

        reqData.records[0].fields = formData;

        console.log(reqData);

        axios.post(url, reqData, reqHeaders).then(res => {
            document.querySelector('.success-messg').style.display = 'block';
            setTimeout(function(){
                form.reset();
                document.querySelector('.success-messg').style.display = 'none';
            },2000)
        })
        .catch (err => {
            if (err.reponse){
                document.querySelector('.fail-messg').style.display = 'block';
                setTimeout(function(){
                    document.querySelector('.fail-messg').style.display = 'none';
                    form.reset();
                }, 3000)
            } else if (err.request) {
                document.querySelector('.fail-messg').style.display = 'block';
                setTimeout(function(){
                    document.querySelector('.fail-messg').style.display = 'none';
                    form.reset();
                }, 3000)
            } else {
                console.log(err);
            }
        })
    });
.form-wrapper{
  text-align: center;
}

#user_form{
  height: 11rem;
  width:30rem;
  position:absolute;
  margin:auto;
  bottom:0;
  top:55vh;
  left:0;
  right:0;
  opacity:0;
  z-index:4;
}

.form-wrapper input{
  border:0;
  color:black;
  background-color:#f9da06;
  border-bottom:2px solid black;
  width:10.5rem;
  margin:1.2rem;
}

.form-wrapper input:focus{
  border:0;
  border-bottom:2px solid black;
  outline:none;
}

.form-wrapper ::placeholder {
  color:black;
  opacity: 1;
}

#info-submit{
  background-color:black;
  font-size: 20px;
  color:#f9da06;
  border:0;
  cursor: pointer;
  height:2.289rem;
  width:10.5rem;
  outline:0;
}

.success-messg {
  font-size: 16px;
  text-align: center;
  color: black;
  height:4rem;
  position:absolute;
  margin:auto;
  bottom:0;
  top:80vh;
  left:0;
  right:0;
  display:none;
}

.fail-messg{
  text-align: center;
  font-size: 14px;
  color: black;
  height: 2rem;
  position:absolute;
  margin:auto;
  bottom:0;
  top:80vh;
  left:0;
  right:0;
  display:none;
}
<div class="form-wrapper">
                <form id="user_form">
                        <input type="name" id="firstName" placeholder="First Name..." name="Firstname" onChange="logData(id, formData, this.value)">
                        <input type="name" id="lastName" placeholder="Last Name..." name="Lastname" onChange="logData(id, formData, this.value)">
                        <input type="email" id="email" placeholder="Email..." name="email" onChange="logData(id, formData, this.value)">
                        <input type="submit" id="info-submit" value="Submit">
                </form>
                <div class="success-messg"><p>Thank you for your submission!</p></div>
                <div class="fail-messg"><p>Sorry, we were unable to take your submission at this time.</p></div>
            </div>
            
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

4

1 回答 1

0

您的 CSS 片段似乎不起作用，但我会尽力帮助您提供的内容。

您可以做一些事情，例如在事件侦听器函数中创建一个 try catch 块，然后抛出一个特定于它们自己的错误，然后通过查看您的代码，通过您想到的特定任务处理每个错误'我会建议你看看这个并自己去。

form.addEventListener("submit", function (e) {
  e.preventDefault();

  try {
    //Throw an error if a field in the form is an empty string
    for (const data in formData) {
      if (formData[data] === "") {
        const error = new Error();
        //Set the not valid attribute to true so that it can be handled specifically
        error.notValid = true;
        throw error;
      }
    }

    reqData.records[0].fields = formData;

    console.log(reqData);
    axios
      .post(url, reqData, reqHeaders)
      .then((res) => {
        document.querySelector(".success-messg").style.display = "block";
        setTimeout(function () {
          form.reset();
          document.querySelector(".success-messg").style.display = "none";
        }, 2000);
      })
      .catch((err) => {
        //Throw back the axios error
        throw err;
      });
  } catch (err) {
    if (err.reponse) {
      document.querySelector(".fail-messg").style.display = "block";
      setTimeout(function () {
        document.querySelector(".fail-messg").style.display = "none";
        form.reset();
      }, 3000);
    } else if (err.request) {
      document.querySelector(".fail-messg").style.display = "block";
      setTimeout(function () {
        document.querySelector(".fail-messg").style.display = "none";
        form.reset();
      }, 3000);
    } else if (err.notValid) {
      console.log("Notvalid");
      //Do what you want if the form is not validated
    } else {
      console.log(err);
    }
  }
});

使用 ES2017 async/await 并将其与 try catch 块结合使用，这种类型的错误处理更加容易和清晰。例如，在您的代码中，axios 返回一个 Promise，它可以使用 async/await 进行处理。

有关错误处理和使用 async/await 的更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

我建议您也进行服务器端验证，因为即使使用开发工具，仍然有人可以更改您的前端 JavaScript 代码。

于 2020-09-18T02:32:34.887 回答