jQuery validate plugin : adding a custom validator to accept letters only?

Question

This was a question posed some time back: jQuery validate plugin : accept letters only?

I'm using the validate plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/

What i'm trying to find is a way to make some of my form fields accept letters only, no numbers, special chars etc...

The question was answered like this:

"Simply add a custom validator, and use it like this:"

jQuery.validator.addMethod("accept", function(value, element, param) { return value.match(new RegExp("^" + param + "$")); });

    rules: { 
  field: { accept: "[a-zA-Z]+" } 
} 

However, I can not seem to apply the solution.

Below is my code, so please tell me how to make the changes.

<SCRIPT TYPE="text/javascript">
$.validator.setDefaults({
    submitHandler: function(form) { form.submit();  }
});

$().ready(function() {

    // validate signup form on keyup and submit
    $("#signUp").validate({
        rules: {
            fname: {
                required: true,
                minlength: 2
                },  
            lname: "required",
         user1: {
                required: true,
                minlength: 4

            },
            captcha: {

                required: true,
                minlength: 2
            },
            confirm_captcha: {
                required: true,
                equalTo: "#captcha"
            },
            email: {
                required: true,
                email: true
            },
            confirm_email: {
                required: true,
                equalTo: "#email"
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            fname: {
                required: " Please enter your first name",
                minlength: " Your name must consist of at least 3 characters"
            },
            lname: " Please enter your last name",
            user1: {
                required: " Please enter a username",
                minlength: " Username must consist of at least 4 characters"
            },

            confirm_captcha: {
                required: " Anti-SPAM required",
                equalTo: " Please solve the anti-SPAM equation correctly"
            },
            confirm_email: {
                required: " Please confirm your email",
                equalTo: " Please enter the same email as above"
            },
            email: " Please enter a valid email address",

            agree: " Please accept our policy"
        }
    });

    // propose username by combining first- and lastname
    $("#user1").focus(function() {
        var fname = $("#fname").val();
        var lname = $("#lname").val();
        if(fname && lname && !this.value) {
            this.value = fname + "." + lname;
        }
    });

    // check if confirm email is still valid after password changed
    $("#email").blur(function() {
        $("#confirm_email").valid();
    });

    // check if confirm captcha is still valid after password changed
    $("#captcha").blur(function() {
        $("#confirm_captcha").valid();
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });
});
</SCRIPT>

Answer 1

Below is assuming that you want only fname to be alphabetic.

search for ALPHA_REGEX to see where I added parts to your code.

Also, is the lname: "required", line a typo? I really don't know if it needs to be lname: {"required":true}, or not.

<SCRIPT TYPE="text/javascript">

$.validator.setDefaults({ submitHandler: function(form) { form.submit(); } });

jQuery.validator.addMethod("regex", function(value, element, param) { return value.match(new RegExp("^" + param + "$")); });
var ALPHA_REGEX = "[a-zA-Z]*";

$().ready(function() {
    // validate signup form on keyup and submit
    $("#signUp").validate({
        rules: {
            fname: {
                regex: ALPHA_REGEX,
                required: true,
                minlength: 2
                },  
            lname: "required",
            user1: {
                required: true,
                minlength: 4

            },
            captcha: {

                required: true,
                minlength: 2
            },
            confirm_captcha: {
                required: true,
                equalTo: "#captcha"
            },
            email: {
                required: true,
                email: true
            },
            confirm_email: {
                required: true,
                equalTo: "#email"
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            fname: {
                required: " Please enter your first name",
                minlength: " Your name must consist of at least 3 characters"
            },
            lname: " Please enter your last name",
            user1: {
                required: " Please enter a username",
                minlength: " Username must consist of at least 4 characters"
            },

            confirm_captcha: {
                required: " Anti-SPAM required",
                equalTo: " Please solve the anti-SPAM equation correctly"
            },
            confirm_email: {
                required: " Please confirm your email",
                equalTo: " Please enter the same email as above"
            },
            email: " Please enter a valid email address",

            agree: " Please accept our policy"
        }
    });

    // propose username by combining first- and lastname
    $("#user1").focus(function() {
        var fname = $("#fname").val();
        var lname = $("#lname").val();
        if(fname && lname && !this.value) {
            this.value = fname + "." + lname;
        }
    });

    // check if confirm email is still valid after password changed
    $("#email").blur(function() {
        $("#confirm_email").valid();
    });

    // check if confirm captcha is still valid after password changed
    $("#captcha").blur(function() {
        $("#confirm_captcha").valid();
    });

    //code to hide topic selection, disable for demo
    var newsletter = $("#newsletter");
    // newsletter topics are optional, hide at first
    var inital = newsletter.is(":checked");
    var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
    var topicInputs = topics.find("input").attr("disabled", !inital);
    // show when newsletter is checked
    newsletter.click(function() {
        topics[this.checked ? "removeClass" : "addClass"]("gray");
        topicInputs.attr("disabled", !this.checked);
    });
});