Custom Validation in Contact Form

Question

I am trying to create some custom validation errors, but when I click on my button, it doesn't show the errors and sends the mail and it keeps showing the default html validation messages.

   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>

What am I doing wrong?

From where you calling `validate()`, `msg()` and other functions? And Oh, you don't have parentheses in some of your functions. — Rajdeep Paul, Jan 13 '17 at 21:19
You have several syntax errors. `function msg`, `function validate` must have parenthesis....If you want to do currying, you might see [Nested functions in Javascript](http://stackoverflow.com/a/3212519/2026740) — Daniel Corzo, Jan 13 '17 at 21:26

score 0 · Accepted Answer · edited May 23 '17 at 12:08

Use onsubmit, fix syntax errors and invoke your validation functions

There are a couple of things you need to do.

Add an onsubmit attribute to your form. onsubmit will execute before your form is submitted, so if there are errors in your validation, the form will not submit.

<form id='contact-form' onsumbit="your-form-validation-file.js" role="form" action="bat/MailHandler.php" method="POST">
Fix syntax errors in your form validation file. From initial inspection, you're missing parentheses after function names msg and validate.
```
function msg() { ... }
function validate() { ... }
```
You also have an if keyword which is incorrectly capitalized (see name()'s definition). After adding in the parentheses and uncapitalizing the keyword, your JavaScript shouldn't throw any more syntax errors.

Note: You may still have run-time errors--I have not vetted your actual logic.
In your form validation JavaScript file, actually invoke your functions. You define them, but never actually invoke them. You should probably invoke them in a separate if statement and return false if any of the validation fails.
```
if (!validate() || !msg() || ....) {
    return false; 
}
```

Doing the above should stop your form from being submitted and allow your validation to be displayed.

Thanks a lot. Its working (kind of) but need to fix some minor stuff on my code. — Volt, Jan 16 '17 at 21:34

Custom Validation in Contact Form

1 Answers1

Use onsubmit, fix syntax errors and invoke your validation functions