How to validate input, in non-form element, on keyup with jQuery validate plugin

Question

I have a site that is being built in ASPX. Unfortunately, because of this fact, I cannot actually use the <form> tag to wrap my inputs, and as far as I can see, jQuery Validation Plugin only supports validating inputs within a <form>. Is there any way to validate these inputs, using the specified rules, on keyup without having them wrapped in a <form> tag?

$(function() {
  $('.form-container').validate({
    rules: {
      useremail: {
        required: true,
        email: true
      },
      userstate: {
        required: true,
        maxlength: 2
      }
    },
    messages: {
      useremail: 'Please enter a valid email',
      userstate: 'Please enter your state',
    }
  });
  
  $('.form-container input').on('keyup', function() {
    $(this).validate();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>

<div class="form-container">
  <input type="text" name="useremail" placeholder="Email" />
  <input type="text" name="userstate" placeholder="State" maxlength="2" />
</div>

Because the entire site is wrapped in a form tag, so using the form tag would create nested forms. It's a restriction from the client that I cannot use it. — user13286
– user13286, Commented Nov 7, 2018 at 18:48

Sparky · Accepted Answer · 2018-11-07 20:48:44Z

1

You cannot have nested forms, which is invalid HTML, and you must attach .validate() to a form container. There are no workarounds.

You're also using .validate() all wrong. Since this is the primary initialization method of the plugin, wrapping it within a keyup handler is not correct. Plus the plugin already uses the keyup event to trigger validation.

And no, you cannot put form input elements within a div and then target that div attached to .validate(). It will be ignored. You can only target form elements attached to .validate().

Furthermore, since you're using ASP, you can leverage its built-in Unobtrusive Validation plugin, which automatically constructs and calls the .validate() method based upon your data attributes. Just remember that if you follow this route, you cannot call .validate() yourself. The plugin only allows one call, and once initialized, all subsequent calls to .validate() are ignored.

edited Nov 7, 2018 at 20:48

answered Nov 7, 2018 at 20:40

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

3 Comments

user13286 Over a year ago

Thank you for the information. Is it possible to use the jQuery validation plugin in the way I described? Unfortunately I don't actually have access to the solution myself(I will be handing off files) so I can't leverage the built-in plugin.

Sparky Over a year ago

@user13286, No. You cannot have nested forms and you must attach .validate() to a form. There are no workarounds. Editing my answer with such, but I thought I already explained that clearly enough: "you cannot put form input elements within a div and then target that div attached to .validate(). It will be ignored. You can only target form elements attached to .validate()."

user13286 Over a year ago

Thank you for the detailed response, I appreciate it.

Collectives™ on Stack Overflow

How to validate input, in non-form element, on keyup with jQuery validate plugin

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related