Validations with jQuery Validate

12

I have a problem with a simple validation of rout I do with jQuery Validate . The issue is that when jQuery validates something, it throws a message, in my case it shows a floating balloon on the validated field and in addition to this, it places the field in a red box (this with CSS).

The jQuery Validate that I have is the following one, I also leave the function that I am using for the validation of the rut, which is outside the validate :

$(function(){

  $('#form').validate({
    ignore: '[readonly=readonly]',
    errorPlacement: function (error, element) {
      var lastError = $(element).data('lastError'), newError = $(error).text();
      $(element).data('lastError', newError);

      if (newError !== '' && newError !== lastError) {
        $(element).popover({
          trigger: "manual",
          placement: "auto top",
          content: newError,
          container: "body",
          template: "<div class=\"popover\" role=\"tooltip\"><div class=\"arrow\"></div><div class=\"popover-content\"><p></p></div></div>"
        });
        if (element.is(':hidden')) {
          $(element).next('span').popover('show').addClass('has-error').removeClass('has-success');
          // console.log('hidden element');
        }else {
          $(element).popover("show").parents(".form-group").addClass('has-error').removeClass('has-success');
          // console.log('normal element');
        }
      }
    },  
    success: function (label, element) {
      $(element).popover("hide").parents(".form-group").removeClass('has-error').addClass('has-success');
    },


    rules: {  },
    messages: {  }
  });
  $.validator.addMethod("2_rut", function(value, element){
    return this.optional(element) || $.Rut.validar(value);
  }, "Este campo debe ser un rut valido.");
  $('#2_rut').Rut({
    validation: false
  });
});

What happens is that doing submit validates all OK, but when trying to validate another rut, after the submit , I do not throw the balloon with the message, but only the field is wrapped in red, as I mentioned before, (I removed the code from the red box in case it was the problem, but it's still the same).

And here's my question, I do not know how to force him to show me the message always.

EDIT

I forgot to comment, that the rout I want to validate and that the message appears are dynamic, that is, there may be several fields that I have to validate. Normally it does, but when doing submit the message no longer appears.

EDIT

Doing tests with the attached code previously, we could realize that the popover (or globito) appears to validate the dynamic fields but always in a single position, NOT on the field that should validate. So we can assume that the problem is, the position in which the popover appears.

How could we specify to JQUERY that the popover should appear on the field that we are validating.

    
asked by x_Mario 18.03.2016 в 16:47
source

1 answer

1

alert($( "input[id^='rut']" ).length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="rut1">
<input type="text" id="rut2">
<input type="text" id="rut3">
<input type="text" id="rut4">

The error for which you do not validate is because you are not changing the input ID (the id must be unique so that the DOM does not make erroneous references). That's why jquery can not validate the exact reference in the DOM to avoid that you can add a number to the input id:

<input id="rut1" type="" ...> <input id="rut2" type="" ...> ....

You do not specify what you are using on the server side, although the creation of the input and its incremental id can be done with pure and hard javascript or jquery.

Once you do this of the selected inputs with jquery all the input values that have the id rut (only the word that contains the id is evaluated, to be able to know how many exist):

$( "input[id^='rut']" ).length

This returns the amount of inputs that have that word for example 3

Thus we know how many inputs with rout data we have and it is only validating each of these with your validate function.

    
answered by 06.05.2017 в 16:35