问表单提交失败
EN

Stack Overflow用户

提问于 2022-10-14 06:10:02

回答 1查看 48关注 0票数 0

我在提交表单时遇到了一个问题--它给了我一个错误-->validateform()没有定义

在它开始工作之前。

在贷款申请中，我必须在用户提交包含正确细节的表格后发送一封电子邮件，并随机生成4位数字no，该数字将出现在电子邮件中，哪个用户将收到。

<script src="https://smtpjs.com/v3/smtp.js">
## Heading ##
    function validateForm() {
      let name = document.forms["myForm"]["fullName"].value;
      let email = document.forms["myForm"]["email"].value;
      let pan = document.forms["myForm"]["pan"].value;
      let lamount = document.forms["myForm"]["flamnt"].value;
      let regName = /\d+$/g;
      let regEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
      let regPan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

      //captcha validation
      let input_val = document.getElementById('input_val');
       
      let num1 = document.getElementById('num1');
      let num2 = document.getElementById('num2');
      const mybtn = document.getElementById('btn');
       //returns a random integer from 0to9
         num1.innerText = Math.floor(Math.random() * 10);
         num2.innerText = Math.floor(Math.random() * 10);
         let number1 = num1.innerText;
         let number2 = num2.innerText;
        
  

    enter code here
      mybtn.addEventListener("click", () => {
        //
        let sum_result = parseInt(number1) + parseInt(number2);

        let res = parseInt(input_val.value);

        if (res == sum_result) {
          alert("correct");
        }
        else {
          alert("Incorrect")
        }
          window.location.reload();
      });

      if (name == "" || regName.test(name)) {
        alert("Name must be filled out");
        return false;
      }

      if (email == "" || !regEmail.test(email)) {
        alert("Please enter a valid e-mail address.");
        return false;
      }

      if (pan == "" || !regPan.test(pan)) {
        alert("Please enter a valid PAN no.");
        return false;
      }

      //OTP generation

      const generateOtp = () =>{
        let otp = "";

        for(let i=0 ; i < 4 ; i++){
          otp += Math.floor(Math.random() * 10);
        }
        //if we write return otp directly then this will return otp in string
        return Number(otp); //this will return otp as number.
      };
      console.log("OTP:", generateOtp());

    }

    //sending an email
    // function sendEmail() {
    //   Email.send({
    //     Host: "smtp.gmail.com",
    //     Username: "...@gmail.com",
    //     Password: "....",
    //     To: document.getElementById("email").value,
    //     From: "....@gmail.com",
    //     Subject: "Thank you for Inquiry",
    //     Body: "Well that was easy!!",
    //   })
    //     .then(function (message) {
    //       alert("mail sent successfully")
    //     });
    // }

  </script>
</head>

<body>
  <div class="form-container">
    <h1>Loan Application Form</h1>
    <form name="myForm" method="post" action="thankyou.html" onsubmit="validateForm();">
      <div class="formdesign" id="name">
        Full Name:<input type="text" class="form-control" placeholder="Enter your fullname" name="fullName"><span
          class="formerror"></span>
      </div>

      <div class="formdesign" id="email">
        Email:<input type="email" class="form-control" placeholder="Enter email" name="email"><span
          class="formerror"></span>
      </div>

      <div class="formdesign" id="panno">
        PAN No:<input type="text" class="form-control" placeholder="Like BBHPM5672K" name="pan" maxlength="10"><span
          class="formerror"></span>
      </div>

      <div class="formdesign" id="lamount">
        Loan Amount:<input type="number" class="form-control" placeholder="Enter loan amount" name="flamnt"><span
          class="formerror"></span>
      </div>

      <div class="formdesign">

        Enter Captcha:<input type="text" placeholder="enter captcha" class="form-control" id="input_val" />
        <p id="operation"><span id="num1">1</span> + <span id="num2">2</span></p>
        <button id="bttn" class="captcha-refresh"><i class="fa fa-refresh"></i>Refresh</button>
      </div>

      <input id="btn" class="button" type="submit" value="Submit">
      <input class="button" type="reset" value="Reset">
    </form>

javascript

回答 1

Stack Overflow用户

发布于 2022-10-14 06:30:06

你有很多问题

您的<script src="https://smtpjs.com/v3/smtp.js">没有关闭</script>，代码没有启动<script>。

请尝试使用代码段编辑器<>并删除"enter code“和## here ##

您需要使用submit事件，而e.preventDefault正在停止提交。我将name="myForm“改为id="myForm"，表单不需要名称

您要在验证中添加事件侦听器.

您缺少了刷新函数

这是我相信你需要的

const generateOtp = () => {
  let otp = "";

  for (let i = 0; i < 4; i++) {
    otp += Math.floor(Math.random() * 10);
  }
  //if we write return otp directly then this will return otp in string
  return Number(otp); //this will return otp as number.
};

document.getElementById('bttn').addEventListener("click", e => {
  e.preventDefault();
  let num1 = document.getElementById('num1');
  let num2 = document.getElementById('num2');

  //returns a random integer from 0to9
  num1.innerText = Math.floor(Math.random() * 10);
  num2.innerText = Math.floor(Math.random() * 10);
})


document.getElementById("myForm").addEventListener("submit", (e) => {
  const form = e.target;
  let name = form["fullName"].value;
  let email = form["email"].value;
  let pan = form["pan"].value;
  let lamount = form["flamnt"].value;
  let regName = /\d+$/g;
  let regEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/g;
  let regPan = /^([a-zA-Z]){5}([0-9]){4}([a-zA-Z]){1}?$/;

  //captcha validation
  let input_val = document.getElementById('input_val');

  let num1 = document.getElementById('num1');
  let num2 = document.getElementById('num2');
  let number1 = num1.innerText;
  let number2 = num2.innerText;

  let errors = [];

  let sum_result = parseInt(number1) + parseInt(number2);

  let res = parseInt(input_val.value);

  if (res != sum_result) errors.push("Sum not correct");

  if (name == "" || regName.test(name)) errors.push("Name must be filled out");
  if (email == "" || !regEmail.test(email)) errors.push("Please enter a valid e-mail address.");
  if (pan == "" || !regPan.test(pan)) errors.push("Please enter a valid PAN no.");

  if (errors) {
    alert(errors.join("\n"));
    e.preventDefault();
    return
  }
  //OTP generation
  console.log("OTP:", generateOtp()); // not sure what you want with this
  // sendEmail()
})

//sending an email
// function sendEmail() {
//   Email.send({
//     Host: "smtp.gmail.com",
//     Username: "...@gmail.com",
//     Password: "...",
//     To: document.getElementById("email").value,
//     From: "...@gmail.com",
//     Subject: "Thank you for Inquiry",
//     Body: "Well that was easy!!",
//   })
//     .then(function (message) {
//       alert("mail sent successfully")
//     });
// }

<script src="https://smtpjs.com/v3/smtp.js"></script>
<div class="form-container">
  <h1>Loan Application Form</h1>
  <form id="myForm" method="post" action="thankyou.html">
    <div class="formdesign" id="name">
      Full Name:<input type="text" class="form-control" placeholder="Enter your fullname" name="fullName"><span class="formerror"></span>
    </div>

    <div class="formdesign" id="email">
      Email:<input type="email" class="form-control" placeholder="Enter email" name="email"><span class="formerror"></span>
    </div>

    <div class="formdesign" id="panno">
      PAN No:<input type="text" class="form-control" placeholder="Like BBHPM5672K" name="pan" maxlength="10"><span class="formerror"></span>
    </div>

    <div class="formdesign" id="lamount">
      Loan Amount:<input type="number" class="form-control" placeholder="Enter loan amount" name="flamnt"><span class="formerror"></span>
    </div>

    <div class="formdesign">

      Enter Captcha:<input type="text" placeholder="enter captcha" class="form-control" id="input_val" />
      <p id="operation"><span id="num1">1</span> + <span id="num2">2</span></p>
      <button id="bttn" class="captcha-refresh"><i class="fa fa-refresh"></i>Refresh</button>
    </div>

    <input id="btn" class="button" type="submit" value="Submit">
    <input class="button" type="reset" value="Reset">
  </form>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74065012

复制

相似问题

问表单提交失败
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单提交失败EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单提交失败
EN