Jquery validator moves input field

I’ve got three fields inline and one of them is a inpt field, this is how it look like when they are validated

the problem is when I enter some values into the input fiedl then it moves all the other fields as you can see from the image

I believe something is wrong with the way I unhighlight the field once has been filled but not sure, maybe someone can help me. Please let me know if you need more details. many thanks

This is my html code

<div class="row">
  <div class="form-group fieldGroup">
    <div class="col-md-4">
      <div class="form-group">
        <label class="control-label">Tipologia proprietario</label>
        <select class="form-control bs-select" id="kmg_admin_new_building_owner_type-1" name="kmg_admin_new_building_owner_type[]" data-live-search="true" title="Seleziona tipologia proprietario">
          <option value="1">Proprietario</option>
          <option value="2">Co-Proprietario</option>
          <option value="3">Nudo proprietario</option>
          <option value="4">Usufruttuario</option>
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label class="control-label">Proprietario</label>
        <select class="form-control bs-select" id="kmg_admin_new_building_owner-1" name="kmg_admin_new_building_owner[]" data-live-search="true" title="Seleziona tipologia proprietario">
          <option value="1">Proprietario</option>
          <option value="2">Co-Proprietario</option>
          <option value="3">Nudo proprietario</option>
          <option value="4">Usufruttuario</option>
        </select>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label class="control-label">Se
        <span class="required"> * </span>
        </label>
        <div class="input-group">
          <input type="text" class="form-control prova" id="kmg_admin_new_building_owner_quota-1" name="kmg_admin_new_building_owner_quota[]" placeholder="Quota titolare">
          <span class="input-group-btn input-group-btn input-space">
          <button class="btn btn-default addMore" type="button">Aggiungi proprietario</button>
          </span>
          <span class="input-group-btn input-group-btn input-space">
          <button class="btn btn-default remove" type="button">Rimuovi proprietario</button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

This is my javascript code

    form.validate({

        // doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input

        rules: {
            kmg_admin_new_building_increment: {
                required: true,
                digits: true,
                remote: {     
                  type: 'POST',
                  data: {
                    ajax_action: 'kmg_new_building_check_increment',
                    kmg_new_building_increment: function() {
                        return $( "#kmg_admin_new_building_increment" ).val();
                    }

                  } 
                }
            },
            kmg_admin_new_building_type: { required: true },
            kmg_admin_new_building_palazzina: { required: true },
            kmg_admin_new_building_interno: { required: true },
            "kmg_admin_new_building_owner_type[]": {required: true},
            "kmg_admin_new_building_owner[]": { required: true },
            "kmg_admin_new_building_owner_quota[]": {
                required: true,
                number: true,
                min: 0,
                max: 100
            },
            kmg_admin_new_building_metri: { 
                required: false,
                digits: true 
            }

        },

        messages: {
            kmg_admin_new_building_increment: {
                required: "Specifica un ordine di stampa univoco",
                digits: "L'ordine di stampa può solo essere un numero",
                remote: "Ordine di stampa è già registrato!",
            },
            kmg_admin_new_building_type: "Specifica la tipologia dell'unità immobiliare",
            kmg_admin_new_building_palazzina: "Specifica la palazzina dell'unità immobiliare",
            kmg_admin_new_building_interno: "Inserisci il valore d'interno",
            "kmg_admin_new_building_owner_type[]": "Seleziona tipologia di proprietario",
            "kmg_admin_new_building_owner[]": "Seleziona proprietario",
            "kmg_admin_new_building_owner_quota[]": {
                required: "Specifica la quota",
                number: "solo numeri",
                min: "minimo 0",
                max: "massimo 100"
            },
            kmg_admin_new_building_metri: {digits: "Inserisci valore numerico"}
        },

        errorPlacement: function(error, element) { // render error placement for each input type

            if (element.parent(".input-group").length > 0) {
                error.insertAfter(element.parent(".input-group"));

            } else {
                error.appendTo(element.closest('.form-group'));
            }

        },

        invalidHandler: function(event, validator) { //display error alert on form submit   
            success.hide();
            error.show();
            App.scrollTo(error, -200);
        },

        highlight: function(element) { // hightlight error inputs

            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },

        unhighlight: function(element) { // revert the change done by hightlight

            $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group

        },

        success: function(label) {
            label.addClass('valid').closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group

        },

And this is how I clone the fields


    //add more fields group
    var fieldGroup = $(".fieldGroup").clone();

    // Hide remove button
    $(".remove").parent('span').hide();
    $(".addMore").click(function(e) {
        var fgc = $('body').find('.fieldGroup').length;

        var fieldHTML = '<div class="form-group fieldGroup">' + fieldGroup.html() + '</div>';

        fieldHTML = fieldHTML.replace('kmg_admin_new_building_owner_type-1', 'kmg_admin_new_building_owner_type-' + (fgc + 1));
        fieldHTML = fieldHTML.replace('kmg_admin_new_building_owner-1', 'kmg_admin_new_building_owner-' + (fgc + 1));
        fieldHTML = fieldHTML.replace('kmg_admin_new_building_owner_quota-1', 'fkmg_admin_new_building_owner_quota-' + (fgc + 1));

        $('body').find('.fieldGroup:last').after(fieldHTML);

        var el = $('.fieldGroup').next();
        // Hide add new button
        el.find('.addMore').parent('span').hide();
        // Show remove button
        el.find('.remove').parent('span').show();

        // Load selectpicker again after cloning the inputs
        $('.bs-select').selectpicker({

            iconBase: 'fa',
            tickIcon: 'fa-check',
            dropupAuto: false
        });
    });

 //remove fields group
    $("body").on("click", ".remove", function() {

        $(this).parents(".fieldGroup").remove();
    });

It looks like you’ll want to get a css guru to take a look at a demo page, which will let them more closely examine the problem.

1 Like

Hi @Paul_Wilkins yes you are right the problem was with css I’ve now solved it in this way:


          <div class="row">
                                                  <div class="form-group fieldGroup">
                                                    
                                                    <div class="col-md-12">
                                                        <div class="mt-repeater">
                                                            <div data-repeater-list="group-b">
                                                                <div data-repeater-item class="row">

                                                                    <div class="col-md-4">
                                                                      <div class="form-group">
                                                                        <label class="control-label">Tipologia proprietario</label>
                                                                        <select class="form-control bs-select" id="kmg_admin_new_building_owner_type-1" name="kmg_admin_new_building_owner_type[]" data-live-search="true" title="Seleziona tipologia proprietario">
                                                                          <option value="1">Proprietario</option>
                                                                          <option value="2">Co-Proprietario</option>
                                                                          <option value="3">Nudo proprietario</option>
                                                                          <option value="4">Usufruttuario</option>
                                                                        </select>
                                                                      </div>
                                                                    </div>

                                                                    <div class="col-md-4">
                                                                      <div class="form-group">
                                                                        <label class="control-label">Proprietario</label>
                                                                        <select class="form-control bs-select" id="kmg_admin_new_building_owner-1" name="kmg_admin_new_building_owner[]" data-live-search="true" title="Seleziona tipologia proprietario">
                                                                          {% for select_group_client in select_group_clients %}         
                                                                            <option value="{{select_group_client.km_client_id}}">{{select_group_client.km_client_first_name}} {{select_group_client.km_client_last_name}}</option>    
                                                                          {% endfor %}
                                                                        </select>
                                                                      </div>
                                                                    </div>

                                                                    <div class="col-md-2">
                                                                      <div class="form-group">
                                                                        <label class="control-label">Quota</label>
                                                                        <input type="text" class="form-control prova" id="kmg_admin_new_building_owner_quota-1" name="kmg_admin_new_building_owner_quota[]" placeholder="Quota titolare">
                                                                      </div>
                                                                    </div>

                                                                    <div class="col-md-2 addmore-div">
                                                                        <label class="control-label">&nbsp;</label>
                                                                        <button class="btn btn-default addMore duplicate-field-button-align" type="button">Aggiungi proprietario</button>
                                                                    </div>

                                                                    <div class="col-md-2 remove-div">
                                                                        <label class="control-label">&nbsp;</label>
                                                                        <button class="btn btn-default remove duplicate-field-button-align" type="button">Rimuovi proprietario</button>
                                                                    </div>

                                                                </div>
                                                            </div>
                
                                                        </div>
                                                    </div>
                                                  </div>
                                                </div>

and the the css:
display: block; instead of display: inline-block;

1 Like