Question

我有一个注册表单，验证是通过JavaScript完成的。如果验证失败，它将在动态下方的每个字段中显示span属性中的错误。但问题是如果验证为真，则生成跨度但不可见。因此在更改后还有额外的空白区域。我该如何解决这个问题？

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

    rules: {
        birth_town: { 
            parentname: true,  
            required: true
        },
        birth_district: {  
            parentname: true, 
            required: true
        },
    },
    messages: {
        name: {
            required: "select one ",
            minlength: jQuery.format("select one")
        }
    },
});

Answer 1

尝试使用display:none代替visibility:hidden。

JSFiddle

代码

function hide() {
  var err = document.getElementById("err1");
  err.className = "hidden";
}

function invisible() {
  var err = document.getElementById("err1");
  err.className = "invisible";
}

(function() {
  var val = document.getElementById("txt1").textContent;
  if (val.length == 0) {
    var err = document.getElementById("err1");
    err.innerHTML = "Enter some text";
    err.className = "invisible";
  }
})()

.hidden {
  visibility: hidden;
}
.invisible {
  display: none
}

<input type="text" id="txt1">
<br/> <span class="error" id="err1"></span>

<input type="text" id="txt2">
<br/> <span class="error" id="err2"></span>

<button onclick="hide()">hidden</button>
<button onclick="invisible()">invisible</button>

Answer 2

我认为您的问题出在CSS中。

您可能会为validate-inline课程设置顶部或底部（或两者）边距。 Validate插件将此类附加到错误填充的输入和跟随错误范围。

您可以在此JS Fiddle中看到它。尝试单击“提交”，输入为空。您将看到弹出的错误消息。然后尝试填充第一个输入。这个隐藏的错误，但空间仍然存在。这是因为第二个输入保持类validate-inline，它的边距保持空间不是第一个输入的隐藏误差范围。

尝试从CSS中的validate-inline类中删除边距，看看是否有帮助。

PS。另外我不确定parentname: true - 在插件规则文档中没有找到它，jsFiddle也无法使用它，所以我将它们从规则中删除。

如何防止JavaScript验证中的动态跨度形成

2 个答案:

代码