How to validate a contact form using JavaScript?

Question

I've made a contact form:

<form action="mailto:myemail@me.com" method="post" enctype="plain/text">
  <label for="name">Name:</label>&nbsp;<input type="text" name="name" />
  <label for="email">Email:</label>&nbsp;<input type="text" name="email" />
  <br clear="all" />
  <input type="submit" value="Compose" />
</form>

I want to create a javascript form validator without having to use a server-side language like PHP. Any ideas?

You can use jQuery to validate on the [`.submit()`](http://api.jquery.com/submit/) method. Return `false` on `.submit(callback)` if exists some problem, like invalid email. — David Rodrigues, Mar 17 '12 at 19:05
for e-mail: http://stackoverflow.com/questions/46155/validate-email-address-in-javascript — ZiTAL, Mar 17 '12 at 19:07
Note that JS validation will just _encourage_ user to input correct data, but not _ensure_ that data will be correct anyway (user can have JavaScript disabled in his browser, or user can be a hacker and send data directly to server intentionally). — Marat Tanalin, Mar 17 '12 at 19:12
@Tim I'm trying to avoid using any server-side coding as my project is not uploaded to a database or anything. But I'll try ZiTAL's link. — randmath, Mar 17 '12 at 19:14

score 1 · Answer 1 · answered Mar 17 '12 at 19:11

Take a look on this live example.

$('#form1').submit(function() {
    // Store messages
    var msgs = [];

    // Validate name, need at least 4 characters...
    var name = $('[name=name]', this);
    if(name.val().length < 4) {
        msgs.push('- Name need at least 04 characters;');
    }

    // Validate email [...]
    // {CODE}

    // Validate otherthings [...]
    // {CODE}

    if(msgs.length !== 0) {
        alert("We have some problems:\n\n" + msgs.join("\n"));
        return false;
    }
});

fruchtose · Accepted Answer · 2012-03-17T19:36:34.967

This is a bad idea. JavaScript and JavaScript validation can be bypassed in a number of ways.

The user could tell the browser to not execute any of the JavaScript on the page. If the form itself does not rely on JavaScript, the form will still show up, and the action page will still be there, but all your validation is gone.
The DOM can be edited by the user. Web page developer tools like those in Chrome, Firefox, and IE make it a cinch to change attributes of a form. This includes removing attributes like onsubmit from a form. Or, the user could simply remove JavaScript function from the resources used by the webpage entirely. This allows the user to avoid going through validation.
A user can send POST or GET data directly to the action URL without going through your page. This is great for attackers, since they can inject a malformed form into your server without even going through a browser--they can use a terminal instead, which is much more convenient.

In summary, do not do this. Allowing the user to control validation is a bad thing. Users can turn off client-side JavaScript, but they can't turn off PHP server-side validation. Use PHP validation if you don't want to suffer from embarrassing cross-site scripting attacks and other vulnerabilities.

If you are looking for a PHP form validation library, you can find a number of them around the Internet. For instance, I personally have contributed to one such library that does a good job of evaluating fields in either a POST or GET type form. I apologize for the self promotion, I must insist that you do server-side validation for the sake of security.

That isn't to say that client-side validation is awful and should never be used. But it should always be backed up by server-side validation. You should view client-side validation as a way to inform the user that there is a problem with their form input without reloading, but always use server-side validation to actually look at the input for problems.

It is when any alternative could be trivially bypassed. – fruchtose Nov 30 '17 at 18:04 — fruchtose, Nov 30 '17 at 18:04

score 0 · Answer 3 · answered Mar 17 '12 at 19:12

be careful not to mix things up. you want to do client-side validation, which is nice-to-have, but not as required as server-side validation, which you can only do on the server.

any script-kiddie will still manage to post some crazy data to your server, so you will have to check your requests and sanitize the data on the server-side.

BUT, if you want to do validate your form data before submitting (which is definitely a good standard), you should use one of the many available jQuery plugins to get the biggest bang for the buck.

here is one: http://docs.jquery.com/Plugins/Validation#Example

if you don't like to use jQuery, you can always specify onBlur=myFunction() to execute whatever logic you need when an input field loses its focus.

Ok. So apparently client-side validation is not a good idea. @David_Rodrigues thanks for your scripts they worked, but I forgot about browsers blocking JavaScript. >:( I will have to go the other rout and work out some sort of server-side validation. Oh well. Thanks guys! This definetley helped for learning situations. — randmath, Mar 17 '12 at 19:55
yes, it is still a good idea. you just need to do both (depending on your requirements) — mindandmedia, Mar 17 '12 at 22:46

How to validate a contact form using JavaScript?

3 Answers3