jQuery validation custom validator not fired even though name is correct

Question

I have the following code:

HTML:

<form id="myTestFrom">
  <input type="text" name="test_txb" id="test_txb" value="" class="form-control" />
</form>

JS:

$(function () {

  $.validator.addMethod('testValidationMethod', function (value, element) {
    alert('FIRED');
  }, 'test error message');

  $('#myTestFrom').validate({
    rules: {
      /* (*) */
      test_txb: { testValidationMethod: true }
    }
  });
});

The problem is simple: my custom validator method never gets called.

I have read several similar questions and answers here on StackOverflow (for example this), but none of them seemed to work. In fact, right the opposite. Most of them suggested that the jQuery validator works by looking for input fields with the specified name, not the specified id. That is, the object property name at (*) must match the name attribute of the input to be validated. However, as you can see in my code, I do have the test_txb name (as well as id) on my input, but for some reason, my validator method never gets called using the code above.

However, if I add the name of the validator method (testValidationMethod) as a class to my input field, then it does get called. This sounds contradictionary to whatever I have read here on SO since all those answers stated that the default behaviour is that the validator inspects the name attributes of elements when setting up custom validation rules.

So what is going on here, could someone please explain? The simplest solution would certainly be to just add the aforementioned class name but I hate littering my code with otherwise unnecessary stuff especially if I don't fully understand the reason of why I should do that.

Edit: jQuery validator version is 1.15.1

Edit 2: I also have ASP.NET MVC Unobtrusive lib referenced, maybe that conflits with something?

Ding, ding, ding.... your "edit 2" is the root cause. You can't call .validate() more than once. Since unobtrusive automatically constructs and calls .validate(), your instance is totally ignored. — Sparky
– Sparky, Commented Nov 16, 2016 at 16:27

Balázs · Accepted Answer · 2018-03-13 15:09:32Z

2

After looking around in the source code of the validator plugin I've figured out that the problem was caused by the following lines:

// Check if a validator for this form was already created
var validator = $.data( this[ 0 ], "validator" );
if ( validator ) {
    return validator;
}

So the reason that any answers posted here stated that they could get it working is that they initialized the validator themselves. Probably I got this weird behavior because the ASP.NET unobtrusive library silently initialized the validator and thus even though I passed my rules into the validate method, nothing got added and I got back the preconfigured validator object (ugh, the downside of automated stuff...).

I finally got it working by using the post-initialization rule addition like so:

$('#test_txb').rules('add', {
  testValidationMethod: true
});

edited Mar 13, 2018 at 15:09

answered Nov 15, 2016 at 10:07

Balázs

2,9372 gold badges22 silver badges34 bronze badges

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

1 Comment

Sparky Over a year ago

You can't call .validate() more than once. Since unobtrusive already constructs and calls .validate(), your instance is totally ignored.

Gopal Joshi · Accepted Answer · 2016-11-15 09:44:02Z

May be you forgot to include js of validation or jQuery Here is your working code

html

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="myTestFrom">
      <input type="text" name="test_txb" id="test_txb" value="" class="form-control" />
</form>

JavaSript

$(document).ready(function(){
  $.validator.addMethod('testValidationMethod', function(value, element) {
    console.log('FIRED');
  }, 'test error message');

  $('#myTestFrom').validate({
    rules: {
      test_txb: {
        required: true,
        testValidationMethod: true
      }
    }
  });

});

Fiddle

Babas · Accepted Answer · 2016-11-15 10:10:47Z

0

Have you add the plugin for validation using by jquery ?

https://cdnjs.com/libraries/jquery-validate

Because I have no problem with your solution when I copied/paste it inside codepen.

edit: I think you should have a return value for a validator

edit 2: regarding to your edit, I searched on google and found something that seems interesting, link belove:

https://www.tigraine.at/2011/08/26/jquery-validate-and-microsofts-unobtrusive-validation-dont-play-well-together

edited Nov 15, 2016 at 10:10

answered Nov 15, 2016 at 9:15

Babas

594 bronze badges

1 Comment

Balázs Over a year ago

Yes, I have added otherwise I wouldn't even be able to reference the validator field on $. About the return value, I have tried it like that too and it still does not get called and adding a return value would not explain why it does get called if I add the mentioned class name anyway.

Collectives™ on Stack Overflow

jQuery validation custom validator not fired even though name is correct

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related