jquery validation displays no error message

Question

I am trying to use jquery validation, but for some reason no error message shows up, even though I try to follow various examples:

<form action="/" id="paaForm" method="post">
    <input type="text" name="testMe" id="testMe" />

<button id="btnSubmit" type="button" value="Save" class="btn btn-default" />

jquery:

$(function () {
   $("#paaForm").validate({
    rules: {
        testMe: {
            required: true
        },
  ...
    $('#btnSubmit').on('click', submit);
  ...

function submit() {
    if (!$("#paaForm").valid()) {
        return;
    }
    ...

EDITED:

I have to add more information. My application is an MVC application, so it uses bundling like this:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*"));

This way, MVC validation based on model attributes works perfectly. But I need more complex validation, that is why I added simple jquery validation. And it doesn't work, as I mentioned above. But if I replace bundling with this one,

           bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate.js"));

jquery validation works, but MVC validation doesn't work, because I exclude "~/Scripts/jquery.validate.unobtrusive.js". Is it possible to make both work?

Looks like it should be `return false;` - try just blocking the submit() completely to see if you're not seeing messages because it's POSTing too quick: `function submit() { return false; }` — freedomn-m, May 09 '18 at 18:18
How are you submitting the form? There's nothing calling `submit()` in your code, therefore nothing calling `.valid()` — freedomn-m, May 09 '18 at 18:19
There is no posting. I am submitting using ajax on a button press. — Dmytro, May 09 '18 at 18:19
Please show full working example. All code necessary, but no more. — Wesley Murch, May 09 '18 at 18:20
$("paaForm").validate({ should be $("#paaForm").validate({ as you are grabbing it by id — Denys Fiialko, May 09 '18 at 18:23
@Denys Fiialko Thank you Denys, I fixed that, but it did not help. "do you specify messages in your validate function?" - no, let it show at least a default message... — Dmytro, May 09 '18 at 18:34
There's nothing wrong with the code you've provided. Here's a jsfiddle for [mcve] given the code in the question: https://jsfiddle.net/5m6wfj1y/ — freedomn-m, May 09 '18 at 18:38
What version of jquery and jqueryvalidate are you using? Could possibly be an issue with mixing different versions. — freedomn-m, May 09 '18 at 18:40
@freedomn-m Please see my addition to the original question. Thanks. — Dmytro, May 09 '18 at 20:51
FYI - if you're using the Unobtrusive Validation plugin, then it constructs the `.validate()` method automatically. You cannot simply provide your own instance of `.validate()` as it will be ignored. The plugin is only designed to handle `.validate()` ONE time on any particular form and all subsequent instances are always ignored. Otherwise, show just enough code to reproduce the issue... the HTML and JavaScript as rendered in the browser. — Sparky, May 09 '18 at 21:08
Yes, I have already realized that. Would you like to make your comment an answer? I would mark it as such. Thanks. — Dmytro, May 10 '18 at 12:45

score 1 · Accepted Answer · answered May 11 '18 at 02:50

FYI - if you're using the Unobtrusive Validation plugin, then it constructs the .validate() method automatically. You cannot simply provide your own instance of .validate() as it will be ignored. The plugin is only designed to handle .validate() ONE time on any particular form and all subsequent instances are always ignored.

Dharmendrasinh Chudasama · Answer 2 · 2018-05-10T05:33:37.157

0

Just change one function, then your problem will resolve :-)

function submit() {
     if (!$("#paaForm").valid()){
         return false; 
      } 
      ...
      return true;
 }

edited May 10 '18 at 05:33

answered May 09 '18 at 18:45

Dharmendrasinh Chudasama

1,007
12
12

Still no luck. As I understand, it is all about submitting the form, but I do not submit, I just make an ajax call. I only want to display error message if the form is invalid. – Dmytro May 09 '18 at 19:17
1

Please see my addition to the original question. Thanks. – Dmytro May 09 '18 at 20:51
do one think, write "$.validator" in your browser console, if it returns "undefined" it means "jquery-validation" plugin is not loaded yet, if it don't return anythink, try different browser's console(current browser console settings may hide) – Dharmendrasinh Chudasama May 10 '18 at 05:37
also you can execute "alert($.validator);" in your js code, see what will display in alert, if undefined/null it means plugin not loaded properly – Dharmendrasinh Chudasama May 10 '18 at 05:40

score 0 · Answer 3 · answered May 09 '18 at 19:07

0

You should change your code as below. You need to give access to show error messeges by below jquery plugin. Default validate set debug: false. Set it as true.

$("#paaForm").validate(
   debug: true
});

This should work for you. For more about jquery validation click here. Good luck!

answered May 09 '18 at 19:07

BK94

59
1
11

it still doesn't work. I though that debug: true just prevents from submitting. – Dmytro May 09 '18 at 19:14
Please see my addition to the original question. Thanks. – Dmytro May 09 '18 at 20:51

jquery validation displays no error message

3 Answers3