Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我做错了什么？

Answer 1

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

您需要做几件事。

在表单中添加onsubmit属性。 onsubmit将执行 before您的表单已提交，因此如果您的表单中存在错误验证，表格不会提交。

<form id='contact-form' onsumbit="your-form-validation-file.js" role="form" action="bat/MailHandler.php" method="POST">
修复表单验证文件中的语法错误。从初始检查开始，您在函数名称msg和validate之后缺少括号。
```
function msg() { ... }
function validate() { ... }
```
您还有一个if关键字大写不正确（请参阅name()的定义）。添加括号并取消关键字后，您的JavaScript不应再抛出语法错误。

注意：您可能仍有运行时错误 - 我没有审核过您的错误实际的逻辑。
在表单验证JavaScript文件中，实际调用您的函数。您定义它们，但从未实际调用它们。您可能应该在单独的if语句中调用它们，如果任何验证失败，则返回false。
```
if (!validate() || !msg() || ....) {
    return false; 
}
```

执行上述操作应停止提交表单，并允许显示验证。

联系表单中的自定义验证

1 个答案:

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