jQuery Validate plugin is not working as expected

Question

I am trying to set up a validation for a login page and i am unable to set the messages manually. Test below:

$("#botonEnviar").click(function() {
  //alert("Button push works");
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
    messages: {
      _username: {
        required: "El campo DNI no puede estar vacío"
      },
      _password: {
        required: "El campo contraseña no puede estar vacío"
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="DNI" name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="contraseña" name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="botonEnviar" type="submit" class="btn green pull-right">Acceder </button>
  </div>
</form>

When activating (click) the button i get no errors at all (only the alert when i uncomment it), but when i set the class="required" or the attribute required i get the error "This field is required." which displays even after i delete the entire script. I want to override this default. In other words, I want to be able to display my custom messages ("El campo DNI no puede estar vacío", or "El campo contraseña no puede estar vacío"). I've read the docs, and similar questions (which are many, i know), but i got no results with the solutions provided so i hope you can help me somehow. Thanks

Extra, in case it helps

alert($("#loginform").validate().form());

returns true even after i click it with empty fields.

Edit: The form works correctly independently from the javascript validation itself. It logs when data is right and it refreshes page when the login doesnt work. So no problem with that

EDIT2: At first i was using:

<script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>

after i changed those to the ones edited worked perfect.

EDIT3: I did some research on the imports on my proyect when i noticed it was an order problem. Jquery library was first, just before the bootstrap library. Turned them around worked again with the old libraries. I wouldnt have reached this without your help, thanks again!

Solved after the edit from @Giovan. Seemed to be a problem with the imports i was using the ones within the proyect which only worked partially. — Mbotet
– Mbotet, Commented Nov 26, 2018 at 13:19
You went a little too heavy on the generic tags. Please only use tags that are relevant to the content of your question; anything else is considered tag-spam. Edited. Thanks. — Sparky
– Sparky, Commented Nov 26, 2018 at 15:21

Sparky · Accepted Answer · 2018-11-26 18:06:01Z

1

Your code seems to be ok in the snippet, the problem may be in the development environment, another error may be preventing the code from running?

Also you don't need to do anything when clicking the button, because there is already a "submit" event triggered by the type="submit" button, and the plugin will check automatically if your form is valid.

If you need to do something with button, you will need to remove the type submit and when click, check if form is valid, as below:

$(function() {
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
    messages: {
      _username: {
        required: "El campo DNI no puede estar vacío"
      },
      _password: {
        required: "El campo contraseña no puede estar vacío"
      }
    }
  });
  
  $("#botonEnviar").click(function () {
   if( $("#loginform").valid() ) {
    alert('seems ok!!');
   }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="DNI" name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="contraseña" name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="botonEnviar" type="button" class="btn green pull-right">Acceder </button>
  </div>
</form>

edited Nov 26, 2018 at 18:06

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Nov 26, 2018 at 13:16

Giovan Cruz

73110 silver badges22 bronze badges

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

2 Comments

Mbotet Over a year ago

Yes, you are right, it was all due imports. I was using the proyect imports, but the online ones work perfect. Thanks a lot!

Mbotet Over a year ago

The button thing is something someone did before i got here and cannot be touched so... i agree with you there. That was the first thing i tried to change, but i was told to let the button like that.

Collectives™ on Stack Overflow

jQuery Validate plugin is not working as expected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related