On keyup, focusout events

[aucman]

Hi!

I am just wondering. Is it possible to add a feature to jquery validation plugin where on a particular form you could mark which fileds are validated onkeyup and which onfocusout. So as I am aware now it is only possible to do this for the whole form so you either have a choice to use one or the other but no custumization on particular filed

[jzaefferer]

You can override the onxxx options for those handlers. You'd have to copy some of the logic of the default implementation, then add checks for individual fields.

That may not be necessary anyway - what problem are you addressing?

[aucman]

well...default jquery validation works onkeyup.
If you have a field for a username and need to check in db if username exsists then it would be a good solution to mark this field onkeyup: false so only on focus out would fire post request that checks username.
Now you can do this only for entire form so every field fires validation on focus out. If I leave onkeyup: true then ajax post happen too often and solution is kind of slow.

this is my form validation and I am happy with it.

        $(function () {
            $('#frmRegistration').validate({
                onkeyup: false,
                rules: {
                    FirstName: {
                        maxlength: 250,
                        nameAndSurname: true
                    },
                    LastName: {
                        maxlength: 250,
                        nameAndSurname: true
                    },
                    Address: {
                        maxlength: 250,
                        address: true
                    },
                    Phone: {
                        maxlength: 250,
                        phone: true
                    },
                    Mobile: {
                        maxlength: 250,
                        phone: true
                    },
                    Email: {
                        required: true,
                        email: true,
                        minlength: 5,
                        maxlength: 250,
                        checkEmail: true
                    },
                    Password: {
                        required: true,
                        alphaNumeric: true,
                        minlength: 6,
                        maxlength: 250
                    },
                    PasswordValidation: {
                        required: true,
                        alphaNumeric: true,
                        minlength: 6,
                        maxlength: 250,
                        equalTo: '#Password'
                    },
                    Username: {
                        required: true,
                        alphaNumeric: true,
                        minlength: 3,
                        maxlength: 250,
                        checkUsername: true
                    },
                    IdLanguage: {
                        required: true
                    },
                    HumanChecking: {
                        required: true,
                        digits: true,
                        checkHumanChecking: true,
                        maxlength: 150,
                    }
                },
                errorPlacement: function(error, element){
                    if ( element.is(':radio') || element.is(':checkbox')){
                        error.insertAfter(element.parent()).animate({opacity: 0.75, left: '+=50'});
                    } else { 
                        error.insertAfter(element).animate({opacity: 0.75, left: '+=50'});
                    }
                },
                validClass: 'checked',
                success: function (label) {
                    label.addClass('checked');
                }
            });
        });

I am just asking if my suggestion is something that could be easly implemented in current jquery validation plugin or not. I think it would be nice to have something like that, so you could mark particular filed in a form when validation fires.

                    Username: {
                        required: true,
                        onkeyup: false,
                        alphaNumeric: true,
                        minlength: 3,
                        maxlength: 250,
                        checkUsername: true
                    },

[jzaefferer]

You've posted a lot of code, but I don't see an actual suggestion in there, except for checkUsername: true - what is that supposed to be doing?

[aucman]

Check username is in my case something like this:

        <script type="text/javascript">
            $(function () {
                  $.validator.addMethod('checkUsername', function (value) {
                  return !eval(
                       $.ajax({
                           async: false,
                           type: 'POST',
                           url: '@Url.Action("UsernameExists", "Miscelaneous", new { area = string.Empty })',
                           data: window.AddAntiForgeryToken({
                           username: value
                       })
                  }).responseText);
                  }, '@ValidationMessagesTrl.UsernameAlreadyExists');
            });
        </script>

controller method UsernameExists returns Json(exists) where exists is true or false.

P.S. Sorry for a lot of unnecessry code

[jzaefferer]

Using async:false is terrible, it'll block the browser. You should use the remote method, its async and properly handles synchronization with the form submit.

[aucman]

http://www.jquery4u.com/ajax/jquery-ajax-validation-remote-rule/

I found this. I get the remote but I am using checkUsername on multiple pages so right now I am pretty happy that all I need to do in my validation on particular page is

         checkUsername: true

is there a way to use remote the same?...as you can see my method also returns validation message text and now is very convenient as I don't have any doubling of the code.

[kinergy]

this ticket discusses two issues that I am interested in but don't see a clear answer:

(1) How can I turn off the onkeyup validation for a particular field that is using 'remote' (or any other rule for that matter)

What worked for me for (1) was to implement this: http://stackoverflow.com/a/7207888/1787629. Ideally though there could be a way of simply configuring the behavior per input field

(2) How can I abstract a 'remote' into a custom validator method for reuse? E.g. checkPasswordStrength which I use on a variety of pages after using addMethod

Does anybody have a suggestion for this one?

[jzaefferer]

I'm sorry for the lack of activity on this issue. Instead of leaving it open any longer, I decided to close old issues without trying to address them, to longer give the false impression that it will get addressed eventually.

To the reporter (or anyone else interested in this issue): If you're affected by the same issue, consider opening a new issue, with a testpage that shows the issue. Even better, try to fix the issue yourself, and improve the project by sending a pull request. This may seem daunting at first, but you'll likely learn some useful skills that you can apply elsewhere as well. And you can help keep this project alive. We've documented how to do these things, too. A patch is worth a thousand issues!