CODEWITHSUNDEEP
javascriptjqueryjquery-validateunobtrusive-validation
Balázs
Balázs

Reputation: 2929

jQuery validation custom validator not fired even though name is correct

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?

Upvotes: 3

Views: 3256

Answers (3)

Bal&#225;zs
Bal&#225;zs

Reputation: 2929

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
});

Upvotes: 2

Babas
Babas

Reputation: 59

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

Upvotes: 0

Gopal Joshi
Gopal Joshi

Reputation: 2358

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

Upvotes: 0

Related Questions