Question

如果你点击一个字段然后再出来，它会变成红色，因为它的验证失败了，但是底部的按钮似乎发生了变化。

我正在使用http://www.formvalidator.net/插件进行验证。

有谁能告诉我什么导致按钮移动？

来源已删除，因为它很大，可以在http://bit.do/bVpn9

看到

Answer 1

当表单验证并在按钮后通过JS插入DOM中的span错误消息时抛出错误。

EG。

<span class="help-block form-error">You have not given a correct e-mail address</span>

据推测，这条消息会改变长度，从而跳跃。

你看不到它，因为有一条规则

body span {
    opacity: 0;
}

这可能没有改变，也许应该如此。

添加新规则

span.help-block.form-error {
    opacity: 1;
    display: block;
}

这将使消息可见并将其移动到按钮

下

Answer 2

似乎是因为错误范围出现在按钮的右侧。我猜整个div都在中心而不仅仅是按钮。这导致按钮向右移动。

此时不透明度为0.

    body span {
        opacity: 0;
    }

如果你把它变成

    body span {
        opacity: 1;
    }

你可以清楚地看到它为什么会发生变化。如果您打算显示消息，解决方案是更改不透明度。如果您根本不想显示该消息并且想要确保该按钮没有向左移动，您应该停止显示错误范围的代码或（如果您不知道该怎么做）添加< / p>

    style='display:none;'

跨度。这可以如上所示内联完成，或者可以在style.css文件中完成。

Answer 3

您有一个span类，当填写代码时出现错误：

<span class="help-block form-error">You have not given a correct e-mail address</span>

虽然您将不透明度设置为0，但文本仍然存在。

body span {
    opacity: 0;
}

因此，您必须更改控制“错误”的任何jQuery或插件。 class并在span文本中添加。

虽然，如果你想要一个临时修复，把它添加到你的CSS，它将停止按钮移动。

body span {
    display: none;
    opacity: 0;
}

这会删除范围文本，但建议您进入插件并在那里进行编辑。