jQuery - Getting custom validation methods to trigger

Question

If I've added a custom validation method to my form, how can I get it to trigger prior to submit?

I'm not decorating my form fields but I thought that adding the new method to my rules section would trigger the method but it doesn't work.

$.validator.addMethod('myCustomValidation', function (data)
{
   // do some work here 
   return myValidationResult;

}, 'Please respond.');


$("#myFormId").validate({        
    rules: {
         "myCustomValidation": {required: true}
    },
    messages: {
       "myCustomValidation": {
           required: "Enter some information before proceeding",        
        }
    },
    submitHandler: function(form)
    {
        // do the work to submit this form
    }
});

I'd like have the validation get triggered when the 'submit' button is pressed.

However, if I add the validation class name to any form field except the submit button, this rule gets triggered. Just can't seem to get it to be triggered just prior to submit..

I think editting this to include the HTML snippet containing the form you're trying to validate will help. — jamiebarrow
– jamiebarrow, Commented Oct 8, 2010 at 13:00

Darin Dimitrov · Accepted Answer · 2009-11-18 18:15:59Z

1

I haven't used the addMethod function but I can suggest you this:

$.validator.methods.myCustomValidation = function(value, element, param) {
    // Perform custom validation and return true or false
    return value === '' || /^([0-9]{10})$/.test(value);
};


$("#myFormId").validate({        
    rules: {
        myElement: { 
            myCustomValidation: true 
        }
    },
    messages: {
        myElement: { 
            myCustomValidation: "Enter some information before proceeding" 
        }
    },
    submitHandler: function(form)
    {
        // do the work to submit this form
    }
});

answered Nov 18, 2009 at 18:15

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin Jamieson Over a year ago

I tried this but it doesn't seem to work. What I am trying to do is make sure the validation gets fired before the submitHandler is invoked. I thought having the rules on the element (specified in class name) would trigger the validation.. Perhaps I don't understand the docs all that well.

Piotr Rochala · Accepted Answer · 2009-11-18 18:11:42Z

0

wrap your code in:

$(function(){
   //your code goes here
});

this will attach validation events on-page-load.

answered Nov 18, 2009 at 18:11

Piotr Rochala

7,8022 gold badges36 silver badges54 bronze badges

1 Comment

Robin Jamieson Over a year ago

It's already wrapped -- it's more that the validation doesn't get triggered prior to the form being submitted.

Chris Van Opstal · Accepted Answer · 2009-11-18 18:30:55Z

0

Call .valid() to trigger the validation:

$("#myFormId").valid();

answered Nov 18, 2009 at 18:30

Chris Van Opstal

37.7k10 gold badges77 silver badges91 bronze badges

1 Comment

Robin Jamieson Over a year ago

Can you call 'valid' inside the submitHandler?

Kyle Butt · Accepted Answer · 2010-02-16 01:51:34Z

0

I think you're looking for addClassRules

$.validator.addMethod('myCustomValidation', function (data)
{
   // do some work here 
   return myValidationResult;

}, 'Please respond.');

$.validator.addClassRules({
  myCustomValidation: { myCustomValidation: true, required: true }
});

$("#myFormId").validate({        
    messages: {
       "myCustomValidation": {
           required: "Enter some information before proceeding",        
        }
    },
    submitHandler: function(form)
    {
        // do the work to submit this form
    }
});

answered Feb 16, 2010 at 1:51

Kyle Butt

9,8703 gold badges24 silver badges16 bronze badges

Comments

Madbreaks · Accepted Answer · 2011-10-25 20:43:44Z

0

You are missing something. rules should look like this.

rules: {
    "elemId": {
        required: true,
        myCustomValidation: true
     }
},

edited Oct 25, 2011 at 20:43

Madbreaks

19.6k7 gold badges62 silver badges75 bronze badges

answered Nov 18, 2009 at 18:17

jitter

54.8k11 gold badges114 silver badges130 bronze badges

Comments

P.Brian.Mackey · Accepted Answer · 2017-04-20 20:42:33Z

0

I recommend using the native $.validator.addMethod to bind the custom method. After that, just call jquery's blur() on the element to trigger validation.

Due to a race condition that I suspect exists in jQuery Validate, I had to spin wait in order to avoid getting a blank error message when I programmatically invoke validation

            //after binding custom validation method
           if($("#myElement").length){//add any checks you need
                var millisecondsToWait = 500;
                //Spin because it works
                setTimeout(function() {
                    $("#myElement").blur();
                    //$("#myElement").valid();//or this
                }, millisecondsToWait);

edited Apr 20, 2017 at 20:42

answered Apr 20, 2017 at 19:13

P.Brian.Mackey

44.4k71 gold badges249 silver badges360 bronze badges

Collectives™ on Stack Overflow

jQuery - Getting custom validation methods to trigger

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related