jquery 工具验证器无法正常工作并出现元素卡在父元素下方的问题

Question

我现在有两个问题。我买了一个模板，并试图将其集成到 Rails 应用程序中。

第一个问题:

我在使用 jquery 工具表单验证时遇到问题。验证不起作用。当您单击提交按钮时，它只会在验证消息应显示的位置显示输入的值。另外，即使填写了必填字段，它仍然不会让我提交表格。

如果您转到此链接 - ，您可以尝试编辑数据以查看验证错误。

第二个问题:

如果您转到此链接 - ，您可以看到头像和“编辑信息”按钮悬卡在灰色背景中。我怎样才能让灰色背景完全封装头像图标？

Answer 1

问题仅出在您的验证脚本中。,

请引用以下位置:

查看实际效果 http://jsbin.com/uwuqul/1/edit

我对您的代码做了三处更改，

(1)。我已经更改了验证程序脚本

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>

(2)。对于电子邮件验证，我们需要更改电子邮件字段中的类型，例如

<input id="demo_email" name="demo_email" required="required" size="30" type="text" value="" novalidate/>

(至)

<input id="demo_email" name="demo_email" required="required" size="30" type="email" value="" novalidate/>

(3)。在验证器脚本中添加样式

jQuery(".edit_profile_form").validator({ 
      position: 'top', 
      offset: [25, 10],
      messageClass:'form-error',
      message: '<div style="width:270px;"><em/></div>' // em element is the arrow
    }).attr('novalidate', 'novalidate');

我认为这可以帮助您解决问题。