jQuery Forum

A nice little challenge...

This is what I did to solve it....

$(document).ready(function(){
    String.prototype.trim = function () {
      return this.replace(/^\s*(\S*(\s+\S+)*)\s*$/, "$1");
    };
    $("#myForm").validate({
        ignore: "#myTextArea",
        errorPlacement: function(error, element) {
            $("#myError").html("");
            error.appendTo("#myError");
        },
        showErrors: function(errorMap, errorList){
            var emails = $("#myTextarea").val().split(',');
            var validEmails = true;
            for(var i=0; i<emails.length; i++){
                $("#testEmail").val(emails[i].trim());
                if(!$("#testEmail").validate().element("#testEmail")){
                    validEmails = false;
                    this.defaultShowErrors();
                }
            }
            if(validEmails){
                $("#testEmail").removeClass("email").removeClass("required");
                $("#myForm").submit();
            }
        }
    });
});

<form id="myForm" name="myForm" method="post" action="#worked">
    <textarea name="myTextarea" id="myTextarea"></textarea><span id="myError"></span>
    <input type="hidden" name="testEmail" id="testEmail" class="required email" value="" />
    <input type="submit" name="submit" id="submit" value="Submit" />
</form>

The error placement hasn't been fully optimized but the functionality seems to work for the most part...

Dom

Thank you so much for your response,

After reading it a few more times, I think I understand what you have done. I just had a follow up question. So, if I understand correctly, you split the entire string, trim it, and do a for loop to set the hidden field "#testEmail"s value to one item in the array of split emails at a time, right?

So you are validating an actual element on the page multiple times, with different values each time.

So my question is, is there a way to do all the split and loop just the same, but call the email validate method in that loop on each segment, without the additional element? Other than that, it all makes sense, thanks!

UPDATE: No, this currently actually doesn't work, crashes FF. will update if I get it working... or...if anyone has insight, welcome as always!

So I am working on this piece now, with some slight modifications.

1. jQuery.validator.addMethod("multiEmail", function(value, element) {
       var emails = $("#email-other").val().split(',');
       var validEmails = true;
       for(var i=0; i<emails.length; i++){
           $("#testEmail").val(emails[i].trim());
           if(!$("#testEmail").validate().element("#testEmail")){
               alert(emails[i]);
               validEmails = false;
               console.log(this);
           }
       }
       return validEmails;
   }, "The format for one or more emails is incorrect.");

... and inside the jQ function:

1. $("#form").validate({
           rules: {
               others:{
                   required: function(element){
                       return !($(".multi-select-link span").length);
                   },
                   multiEmail: true
               }
           }
       });

...and some other bits that aren't really relevant. My problem is now this. It validates fine, but I get two errors now. One next to the HIDDEN element that I'm using to set the value to each email, and then validate to see if its a correct format. But I'm also seeing the one I specify in the method "The format for one or more emails is incorrect." How do I suppress the error messages that are showing up next to the hidden element?

Rather than doing all that, why not just call from with multiEmails:

$.validator.methods['email'].call({optional:function(){return false;}},'<a possible email address>',null)

you're basically calling the method directly there, and faking the call to "optional" to always return false."  pass a "null" in for the element (since there is no element....)

Then you could modifiy the errors message at:

$.validator.messages['multiEmails']  to contain a list of the actual values that are not good email address.

return false if there are any.

I just saw this post today, above ^. I have a working solution, but its pretty convoluted, so I will test this one once I have a spare moment, and hope I can use this instead. thanks again! Will be back to this.

imclaughlin,

I haven't gotten around to figuring mine out, but I think your question involves how to create the method itself.

"multiemail" is not one of the standard, out-of-the-box methods that you get with the plugin. But, cleverly, the plugin allows you to create your own, then call it the way you have done. When you look at jjurisch's post, you'll notice the

1. $.validator.addMethod("multiemail", function(value, element) {
2. ......
   

This will live outside of your jquery function. there is documentation on creating your own method  here:
http://docs.jquery.com/Plugins/Validation/Validator/addMethod

If I'm totally off the mark and you've already done all this but it doesn't work, please post your method, and Im sure someone will be able to assist :)

Not sure how to help, I don't have a clear picture of what is happening or some idea why its not working. Does it tell you anything at all in debug mode? Is it always invalid? Or always valid? I'm not sure why you have the multiemail and the email under recipientEmail validation.