Need another much smaller version of jQuery Validation plugin

See these demos here http://www.visibilityinherit.com/code/jquery-validation-demo.php. I want to do the same thing (red on error and removes red upon correct entry) but only with one simple input (a spam question). All that jquery for one little thing seems def overkill. Anyone have a custom little script lying around or know of a example? Thanks!

do you have to use jquery?

for something basic like that you can do it with just a handfull of lines of code using plain vanilla javascript.

Hi - thanks. Not for this site in question I dont. Thats why I dont want to use it preferably. Unfortunately I js very little so I am unable to write those few lines of js myself.

In that case, you may want to use the

jQuery validator

which takes care of most of the work for you.

All you need is is the jQuery and jQuery validation libraries loaded:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

Then, presuming that your form has a unique identifier


<form id="loginUser">

You only need the following script to enable to validation of the form.


$('#loginUser').validate();

and to put that inside a standard jQuery callback, such as:


$(function () {
    $('#loginUser').validate();
});

so that your form can be found after the page has loaded.

If a field in your form is required, you can specify it like this:


<input type="text" name="username" class="required">

and the appropriate message will be shown in red beside it, and cleared when it’s dealt with. You can see a validation demo to see what it’s like, and there are [url=“http://docs.jquery.com/Plugins/validation#Demos”]other demos of how it can be used at big websites too.

OK cool! Then I could get rid of the validator plugin. Although I wasnt completely forthright I guess. I also need this to verify the correct number. The spam question is 2 + 2 =. I got this working correctly using the validator plugin. Anyway to do this using the jquery validation?

The class rules are fairly limited in what they can do.

You can extend the validator though in many interesting ways, for example, by passing the required rule a function where extra checks can be performed.

If the field was called spammertrap:


<input type="text" name="spammertrap">

You can specify your required validation rule for it like this. Perhaps even with a special error message for the potential spammer:


$("#myform").validate({
  rules: {
    spammertrap: {
      required: function (field) {
        return field.value == 5;
      }
    }
  },
  messages: {
    spammertrap: "Back of spammer!"
  }
});

Although, you may want it without that special error message:


$("#myform").validate({
  rules: {
    spammertrap: {
      required: function (field) {
        return field.value == 5;
      }
    }
  }
});

Nice! Thank you very - very much. I will try that out tommorrow morning. :~)

Strangely I couldn’t seem to get it to work. Instead of spending who knows how much time trouble shooting I just went with jQuery+Validation plugin I had working already. Thanks anyway though! ;:~)