jquery工具验证器无法正常工作,并且问题是挂在父元素下面的元素

Question

我现在有2个问题.我买了一个模板,我试图将它集成到rails应用程序中.

第一个问题:

我在使用jquery工具表单验证时遇到问题.验证无效.单击"提交"按钮时,它只显示验证消息所在的输入值.此外,即使填写了必填字段,它仍然不允许我提交表单.

如果您转到此链接 - ,您可以尝试编辑数据以查看valiation错误.

第二个问题:

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

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');

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