联系人表单中的自定义验证

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将在提交表单之前执行，因此，如果您的验证中有错误，则表单将不会提交。

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

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