Object doesn't support property or method 'valid'

问题

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

回答1:

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/

来源：https://stackoverflow.com/questions/40899211/object-doesnt-support-property-or-method-valid

标签

jquery

asp.net-mvc

jquery-validate