联系表格中的自定义验证

Question

我正在尝试创建一些自定义验证错误，但是当我单击我的按钮时，它不显示错误并发送邮件，并且一直显示默认的 html 验证消息。

   function validate {
     function email() {
       if (form.email.value == "") {
         alert("Ingresar un correo");
         form.email.focus();
         return false;
       }
       var re = /^[\w ]+$/;

       if (!re.test(form.email.value)) {
         alert("Formato de Correo invalido");
         form.email.focus();
         return false;
       }
       return true;
     }

     function name() {

       If(form.name.value == "") {
         alert("Ingrear un nombre");
         form.name.focus();
         return false;
       }
       return true;
     }

     function msg {
       if (form.message.value == "") {
         alert("Ingrese su consulta");
         form.message.focus();
         return false;
       }
       if (!re.test(form.message.value)) {
         alert("Error, ingresar solo caracteres alfanumericos");
         form.message.focus();
         return false;
       }

       return true;
     }
   }

   function validateEmail() {
     var emailID = document.form.email.value;
     atpos = emailID.indexOf("@");
     dotpos = emailID.lastIndexOf(".");
     if (atpos < 1 || (dotpos - atpos < 2)) {
       alert("Por faor ingresar un formato de email valido")
       document.form.email.focus();
       return false;
     }
     return (true);
   }

<form id='contact-form' role="form" action="bat/MailHandler.php" method="POST">
  <div class="contact-form-loader"></div>
  <fieldset>
    <div class="row">
      <div class="grid_4">
        <label class="name">
          <input id="name" class="input" name="cf_name" type="text" placeholder="Ingrese su nombre" value="" required/>
        </label>
      </div>
      <div class="grid_4">
        <label class="phone">
          <input class="input" type="text" name="cf_phone" placeholder="Ingrese su Teléfono:" value="" />
        </label>
      </div>
      <div class="grid_4">
        <label class="email">
          <input id="email" class="input" name="cf_email" type="text" placeholder="Ingrese su email" value="" required/>
        </label>
      </div>
    </div>
    <label class="message">
      <textarea id="message" class="input" name="cf_message" placeholder="Ingrese su mensaje:" required minlength="5" maxlength="999999"></textarea>
      <input class="primary-btn_2" id="btn-enviar" type="submit" value="Enviar" />
      <a class="primary-btn_2" href="#" data-type="reset">Nuevo</a>
  </fieldset>
</form>

我做错了什么？

Answer 1

使用 onsubmit、修复语法错误并调用验证函数

您需要做几件事。

1. 将onsubmit 属性添加到您的表单。 onsubmit 将执行 before您的表单已提交，所以如果您的表单中有错误 验证，表单将不会提交。

   <form id='contact-form' onsumbit="your-form-validation-file.js" role="form" action="bat/MailHandler.php" method="POST">

2. 修复表单验证文件中的语法错误。从初步检查来看，函数名称 msg 和 validate 后面缺少括号。

   function msg() { ... }
   function validate() { ... }
   

   您还有一个大写错误的if 关键字（参见name() 的定义）。添加括号并取消大写关键字后，您的 JavaScript 不应再抛出任何语法错误。

   注意：你可能仍然有运行时错误——我没有审查你的 实际逻辑。

3. 在您的表单验证 JavaScript 文件中，实际调用您的函数。您定义它们，但从不实际调用它们。您可能应该在单独的 if 语句中调用它们，并在任何验证失败时返回 false。

   if (!validate() || !msg() || ....) {
       return false; 
   }
   

执行上述操作应该会阻止您的表单被提交并允许显示您的验证。