CODEWITHSUNDEEP
jqueryjquery-validate
Mbotet
Mbotet

Reputation: 180

jQuery Validate plugin is not working as expected

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!

Upvotes: 0

Views: 2019

Answers (1)

Giovan Cruz
Giovan Cruz

Reputation: 721

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>

Upvotes: 1

Related Questions