Object doesn't support property or method 'valid'

Question

My code is throwing the following error:

Object doesn't support property or method 'valid'.

This is because the current form has no validation. That is OK. All I want is to check in advance whether or not I can apply the method valid to the current form to avoid the annoying JavaScript error.

That is all I want. E.g. if(form.isValidatable()) form.valid()

There is nothing wrong with the code. All I need is to know whether or not calling a method or property is going to throw an exception.

form.submit(function () {
    if ($(this).valid())
      onFormIsValid($(this));
    else
      onFormIsInvalid($(this));
  });

UPDATE: I am new to jquery and thank you for your help!!!!! What I am trying to do is to disable all the inputs just before submit and after validation. I do not manage to get the submitHandler being called and it is really hard to realize why. That is why I am doing this solution. See my code. How can I improve this?

I want to apply it to all forms in my solution....

$(document).ready(function () {
  var form = $("form");

  form.bind('invalid-form.validate', function() {
    onFormIsInvalid($(this));
  });

  form.submit(function () {
    if ($(this).valid())
      onFormIsValid($(this));
    else
      onFormIsInvalid($(this));
  });
});

function onFormIsValid(form) {
  $("input", form).prop("readonly", "readonly");
  $("input[type=submit]", form).prop("disabled", true);

  $("input[type=submit]", form).each(function () {
    $(this).data("val", $(this).val());
  });

  $("input[type=submit]", form).val("Processing...");
}

function onFormIsInvalid(form) {
  $("input", form).prop("readonly", null);
  $("input[type=submit]", form).prop("disabled", false);

  $("input[type=submit]", form).each(function () {
    $(this).val($(this).data("val"));
  });
}

If on the other hand I do the following the submit handler does not get called at all. No error, no clue, nothing. I place a break point and it is like the handler is not there.

form.validate({
  submitHandler: function () {
   onFormIsValid($(this));
  }
 });

  form.bind('invalid-form.validate', function() {
    onFormIsInvalid($(this));
  });

@StephenMuecke, `if (!$.validator)` will only tell you that the plugin is loaded, right? I think the OP wants to know if one particular form has been initialized for validation with `.validate()`. — Sparky, Nov 30 '16 at 22:38
@Sparky, That's the reason for the `?` :) - not sure I understand what OP wants — , Nov 30 '16 at 22:41
@StephenMuecke, yes, what he's asking seems like a very roundabout way for doing something. — Sparky, Nov 30 '16 at 22:46
Quote OP: *"What I am trying to do is to disable all the inputs just before submit and after validation."* ~ use the `submitHandler`! — Sparky, Dec 01 '16 at 00:42
I know but somehow it does not get called. However, invalid-form.validate does work. I am lost here. — Adanay Martín, Dec 01 '16 at 00:44
Are you using Unobtrusive Validation with your ASP? If so, look at this: http://jsfiddle.net/9obe1b35/ - if NOT, then look at this: http://jsfiddle.net/9obe1b35/1/ — Sparky, Dec 01 '16 at 00:47
I tried again and nop... Not getting called. Is there like an strategy to realize why some handler does not get called? This is making me crazy. — Adanay Martín, Dec 01 '16 at 01:15
The error message you posted in your update seems to indicate that you have **not included the jQuery Validate plugin**. — Sparky, Dec 01 '16 at 05:40

Sparky · Accepted Answer · 2017-04-21T14:50:33.627

Your code:

form.submit(function () {
    if ($(this).valid())
      onFormIsValid($(this));
    else
      onFormIsInvalid($(this));
});

This seems like a very roundabout way and is the wrong approach. The plugin automatically captures the click and blocks the submit, so your custom submit() handler will likely conflict.

You could be using the built-in submitHandler and invalidHandler callback functions... then you would not need to worry about how to call .valid(), since submitHandler only fires when valid and invalidHandler only fires when invalid.

Demo 1: http://jsfiddle.net/9obe1b35/1/

If you're using the Unobtrusive Validation helper plugin built into ASP, then the .validate() method is constructed automatically and you cannot put these callback functions inside. Instead, you can put your custom submitHandler and invalidHandler functions into the jQuery.validator.setDefaults() method.

Demo 2 (Unobtrusive): http://jsfiddle.net/9obe1b35/2/

Object doesn't support property or method 'valid'

1 Answers1

Linked