如何在点击Submit按钮时生成警报，只有当html表单满时使用Javascript

How to generate alert when clicking Submit button, only when the html form is full using Javascript

本文关键字：html 表单 Javascript 满时使 Submit 按钮      更新时间：2023-09-26

我有这个html表单与许多形式的元素。我需要生成警报"感谢您的时间!"您的详细信息已经提交!"一旦单击提交按钮，只有当表单填满时才会提交。当表单为空时，我不想看到此消息。到目前为止，我一直在使用onClick事件。有人可以帮助我这个(我试图实现这个使用Javascript)

下面是Javascript代码和HTML正文

<html>
<head>
<title>JS Validation for other types of form input fields</title>
<script type="text/javascript">
  function submitClick( ) //function shows message after submitting information
  {
  alert("Thank you for your time! Your details have been submitted!");
  }

  function formValidation ( )
  {
  flag = true;
  if (document.myForm.user_name.value == "" )
  {
  alert ( "Please fill in your Name!" );
  flag = false;
  }
  // Validate letters only as Name
  if (!/^[a-zA-Z]*$/g.test(document.myForm.user_name.value))
  {
  alert("Enter alphabetic characters as Name!");
  flag = false;
  }
  // Validate emails
 if (!/^'w+(['.-]?'w+)*@'w+(['.-]?'w+)* ('.'w{2,3})+$/.test(myForm.user_email.value))  //Regular expressions to validate email
 {
 alert("Enter Valid Email Address!");
 flag = false;
 }
 // Validate Phone number
 flag = true;
 if (document.myForm.user_phone.value == "" )
 {
 alert ( "Please fill in your Phone Number!" );
 flag = false;
 }

 if (!/^[0-9]*$/g.test(myForm.user_phone.value))
 {
 alert("Enter numeric values as Phone Number!");
 flag = false;
 }

 if ((document.myForm.userGender[0].checked == false) &&  (document.myForm.userGender[1].checked == false ) )
 {
 alert ( "Please select your gender!" );
 flag = false;
 }
 if (document.myForm.userAge.selectedIndex == 0 )
 {
 alert ( "Please select your Age from the drop-down list!" );
 flag=false;
 }
 if (document.myForm.termsAndConditions.checked == false )
 {
 alert ( "Please check the Terms and Conditions box!" );
 flag= false;
 }
 return flag;
 }
 </script>
 </head>
 <body bgcolor = "#FFFFFF">
 <form name="myForm" method="post" onSubmit=" return formValidation( );">
 <h1>Please fill out your details below:</h1>
 <p>Name: <input type="text" name="user_name"></p>
 <p>Email: <input type="text" name="user_email"></p>
 <p>Phone: <input type="text" name="user_phone"></p>
 <p>Gender: <input type="radio" name="userGender" value="Male">Male
 &nbsp; <input type="radio" name="userGender" value="Female">Female</p>
 <p>Age:
 <select name="userAge">
 <option value="">Please select your age:</option>
 <option value="0-17 years">0-17 years</option>
 <option value="18-29 years">18-29 years</option>
 <option value="30-40 years">30-40 years</option>
<option value="40-64 years">40-64 years</option>
<option value="65+ years">65+ years</option>
</select>
<p>Please tick the checkbox if you agree with our Terms and Conditions:
<input type="checkbox" name="termsAndConditions" value="Yes"> Yes
<p><input type="submit" name="send" value="Submit Details" onClick="submitClick( )"></p>
</form>
</body>
</html>

  if(formValidation())
{
    alert("Thank you for your time! Your details have been submitted!"); 
}

将if放在submitClick方法中的警报之前。这样，只有当验证成功时，才会显示警告。

提交按钮不需要onclick事件处理程序。只需像这样使用表单的onsubmit事件处理程序:

  function submitClick() {
    if (formValidation()) {
      alert("Thank you for your time! Your details have been submitted!");
      return true;
    } else {
      return false;
    }
  }
  function formValidation() {
    flag = true;
    if (document.myForm.user_name.value == "") {
      alert("Please fill in your Name!");
      flag = false;
    }
    // Validate letters only as Name
    if (!/^[a-zA-Z]*$/g.test(document.myForm.user_name.value)) {
      alert("Enter alphabetic characters as Name!");
      flag = false;
    }
    // Validate emails
    if (!/^'w+(['.-]?'w+)*@'w+(['.-]?'w+)* ('.'w{2,3})+$/.test(myForm.user_email.value)) //Regular expressions to validate email
    {
      //alert("Enter Valid Email Address!");
      //flag = false;
    }
    // Validate Phone number
    if (document.myForm.user_phone.value == "") {
      alert("Please fill in your Phone Number!");
      flag = false;
    }
    if (!/^[0-9]*$/g.test(myForm.user_phone.value)) {
      alert("Enter numeric values as Phone Number!");
      flag = false;
    }
    if ((document.myForm.userGender[0].checked == false) && (document.myForm.userGender[1].checked == false)) {
      alert("Please select your gender!");
      flag = false;
    }
    if (document.myForm.userAge.selectedIndex == 0) {
      alert("Please select your Age from the drop-down list!");
      flag = false;
    }
    if (document.myForm.termsAndConditions.checked == false) {
      alert("Please check the Terms and Conditions box!");
      flag = false;
    }
    return flag;
  }
<html>
<head></head>
<body bgcolor="#FFFFFF">
  <form name="myForm" method="post" onsubmit="return submitClick();">
    <h1>Please fill out your details below:</h1>
    <p>Name:
      <input type="text" name="user_name">
    </p>
    <p>Email:
      <input type="text" name="user_email">
    </p>
    <p>Phone:
      <input type="text" name="user_phone">
    </p>
    <p>Gender:
      <input type="radio" name="userGender" value="Male">Male &nbsp;
      <input type="radio" name="userGender" value="Female">Female</p>
    <p>Age:
      <select name="userAge">
        <option value="">Please select your age:</option>
        <option value="0-17 years">0-17 years</option>
        <option value="18-29 years">18-29 years</option>
        <option value="30-40 years">30-40 years</option>
        <option value="40-64 years">40-64 years</option>
        <option value="65+ years">65+ years</option>
      </select>
      <p>Please tick the checkbox if you agree with our Terms and Conditions:
        <input type="checkbox" name="termsAndConditions" value="Yes"> Yes
        <p>
          <input type="submit" name="send" value="Submit Details">
        </p>
  </form>
</body>
</html>

指出:

  • 我注释掉了邮件检查，因为它似乎不起作用。
  • 安全验证应该以另一种方式处理:将flag设置为false，当一切正常时将flag设置为true。

只需添加到您的提交点击:

function submitClick( ) //function shows message after submitting information
{
  let flag = formValidation();
  if(flag)
  {
     alert("Thank you for your time! Your details have been submitted!");
  }
}
相关文章：