views:

1106

answers:

3

I'm using jquery validate plugin to validate an email address against a database using the remote method of this plugin.

I need to check the email address is not in our database already. Originally, the script in combination with server side code simply checked for the email address in our database and returned true or false, this worked successfully.

I now need to add an additional feature as it's now possible for us to have the same email address in the database twice as long as the siteid for the record is different i.e. if a record for [email protected] with siteid=site1 exists in the database, you can't add [email protected] with siteid=site1 again, but you can add [email protected] with siteid=site2.

I've confirmed that the serverside code is working and for a given email address and siteid, it returns true or false as expected.

I want to revalidate the email field whenever the siteid select box is changed. At the moment it seems to remember it's previous validation (it's already validated at load) and is not affected by the siteid change, unless I change the email from [email protected] to something else, then change it back, then it validates correctly for the new siteid. I've tried a combination of remove rules and add rules, nothing seems to work.

Help!

<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
    var enquiryform = {
        rules: {
       email: {
           required: true,
   email: true,
   remote: 'emailcheck2.asp?siteid=' + $('#siteid').val()
       }  
   },
   messages: {
            email: {
           remote: 'exists already!'
       }
        }     
    };

    var validatedform = $(".validatedform").validate(enquiryform).form();    
    $("#siteid").bind("change", function(e){
        enquiryform.rules.email.remote='emailcheck2.asp?siteid=' + $('#siteid').val();
    });
});
</script>
</head>
<body class="contactadd">
</head>
<body>
<form method="Post" class="validatedform">
<input class="email" id="email" name="email" type="text">
<select id="siteid" name="siteid">
<option value="1">Site 1</option>
<option value="2">Site 2</option>
</select>
<input id="submitbutton" type="submit" value="Create">
</form>
</body>
</html>
+1  A: 

From what I can tell, this may be a limitation of the validate plugin. There are several options for triggering the validation (which is what you want to do) given at http://docs.jquery.com/Plugins/Validation/validate#toptions but I don't see a way to trigger validation on one element when another element changes.

Your best bet is to place your validation code in something like this:

$('select#siteid').onChange(function(){
        $('form.validatedform').validate({ 
                 rules:{
                       email: {
                              required: true,
                              email: true,
                              remote: 'emailcheck2.asp?siteid=' + $('#siteid').val()
                       }
                  }
         });
  });
idrumgood
doesn't seem to work. It seems that once an element has been validated, either by form submit or using .form() to force it at the start, it won't allow revalidation until something has changed in the field. If I change the email address and blur off the field then focus back on it and change it back, you can revalidate.
+1  A: 

The plugin caches the value for performance reasons. As a workaround for now you could try to invalidate the cache manually whenever the dependent value changes:

$("#site").change(function() {
  $("#email").removeData("previousValue");
});
Jörn Zaefferer
A: 

That did the trick. Many thanks!

Neil Burton