Tom Tom - 8 months ago 67
jQuery Question

jquery.validate plugin - how to trim values before form validation

I'm using the excellent jquery.validation plugin by Jörn Zaefferer and I was wondering whether there's a easy way to automatically trim form elements before they are validated?

The following is a cut down but working example of a form which validates a email address:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src=""
<script src=""
<script type="text/javascript">
$().ready(function() {
rules: {
email: {
required: true,
email: true

<form class="cmxform" id="commentForm" method="get" action="">
<label for="cemail">E-Mail:</label><input id="cemail" name="email"
class="required email" />
<input class="submit" type="submit" value="Submit"/>


The problem is that some users are getting confused because they accidently enter some whitespace in their email address, e.g. " ". And the form won't submit and has a error message: "Please enter a valid email address.". Non-techy users don't know how to spot whitespace and may just quit the site rather than try to work out what they've done wrong.

Anyway, I was hoping I could chain "
" before the validation so the
whitespace is removed and the validation error never occurs?

I could use addMethod to build my own email validation function. But I'm sure there's a more elegant solution?


I did this with success.

Instead of:

Email: { required: true, email: true }

I did this:

Email: {
    required: {
            return true;
    email: true