jQuery验证程序移动输入字段

Question

我有三个内联字段，其中一个是inpt字段，这是经过验证的样子

https://ibb.co/X8c1jDZ

问题是，当我在输入文件中输入一些值时，它将移动所有其他字段，如您从图像中看到的那样

https://ibb.co/Fn666cw

我认为，一旦字段被填满，我取消突出显示的方式有问题，但不确定，也许有人可以帮助我。如果您需要更多详细信息，请告诉我。非常感谢

这是我的html代码

qt5-default

这是我的JavaScript代码

<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>

这就是我克隆字段的方式

    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

        },

Answer 1

我认为这不是一个严重的问题，您只需要考虑布局的变化，并为CSS做好准备。

这是正在发生的事的一个例子：

（您可以在答案底部找到简短的说明。）

jQuery(document).ready(function($) {

  $(".modify").on('click', function(e) {
    // $.fn.toggle() switches between display: none and
    // display: block
    $('#il3').find('label').toggle()
  })
})

.inputandlabel {
  float: left;
}

input[type="text"],
label {
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <button type="button" class="btn btn-primary modify">Just push it to see the problem</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div id="il1" class="inputandlabel">
        <label for="form1">Form1</label>
        <input id="form1" type="text" />
      </div>
      <div id="il2" class="inputandlabel">
        <label for="form2">Form2</label>
        <input id="form2" type="text" />
      </div>
      <div id="il3" class="inputandlabel">
        <label for="form3">Form3</label>
        <input id="form3" type="text" />
      </div>
      <div id="il4" class="inputandlabel">
        <label for="form4">Form4</label>
        <input id="form4" type="text" />
      </div>
      <div id="il5" class="inputandlabel">
        <label for="form5">Form5</label>
        <input id="form5" type="text" />
      </div>
      <div id="il6" class="inputandlabel">
        <label for="form6">Form6</label>
        <input id="form6" type="text" />
      </div>
    </div>
  </div>
</div>

这是一个解决方案：

jQuery(document).ready(function($) {

  $(".modify").on('click', function(e) {
    e.preventDefault()
    if ($('#il3').find('label').css('visibility') !== 'hidden') {
      $('#il3').find('label').css('visibility', 'hidden')
    } else {
      $('#il3').find('label').css('visibility', 'visible')
    }
  })
})

.inputandlabel {
  float: left;
}

input[type="text"],
label {
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-6">
      <button type="button" class="btn btn-primary modify">Just push it to see "nothing"</button>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div id="il1" class="inputandlabel">
        <label for="form1">Form1</label>
        <input id="form1" type="text" />
      </div>
      <div id="il2" class="inputandlabel">
        <label for="form2">Form2</label>
        <input id="form2" type="text" />
      </div>
      <div id="il3" class="inputandlabel">
        <label for="form3">Form3</label>
        <input id="form3" type="text" />
      </div>
      <div id="il4" class="inputandlabel">
        <label for="form4">Form4</label>
        <input id="form4" type="text" />
      </div>
      <div id="il5" class="inputandlabel">
        <label for="form5">Form5</label>
        <input id="form5" type="text" />
      </div>
      <div id="il6" class="inputandlabel">
        <label for="form6">Form6</label>
        <input id="form6" type="text" />
      </div>
    </div>
  </div>
</div>

从这两个摘要中可以看到，通过在display: none;上设置label可以扰乱布局。 display: none;从流中删除元素（不是DOM本身，而是从对象流中删除），而 visibility: hidden;仅使元素不可见 。完全不同，不是吗？

因此，将display CSS属性设置为none会“消除高度”，从而使布局保持秩序-尝试将元素的可见性设置为使用JS隐藏。

如果这不起作用，则为表单组指定一个固定的高度（带有成功/错误消息的高度），并且不要在成功/错误时更改该值。