引用
app/controllers/application_controller.rb
# 表單驗證錯誤
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
message = case html_tag
when /<(label)/
%(<div class="error">#{html_tag}</div>).html_safe
when /<(input|textarea|select)/
if instance.error_message.kind_of?(Array)
%(#{html_tag}</dd><dd class="error">#{instance.error_message.join('<br />')}).html_safe
else
%(#{html_tag}</dd><dd class="error">#{instance.error_message}).html_safe
end
end
message.html_safe
end
引用
app/helpers/layout_helper.rb
module LayoutHelper
module FormBuilderAdditions
def error_messages
if object.errors.any?
message = I18n.t('activemodel.errors.template.header',
:count => object.errors.count,
:model => object.class.model_name.human.downcase)
html = <<-HTML
<div id='error'>
<p>#{message}</p>
</div>
HTML
html.html_safe
end
end
end
end
ActionView::Helpers::FormBuilder.send(:include, LayoutHelper::FormBuilderAdditions)
<form accept-charset="UTF-8" action="/people" class="new_person" id="new_person" method="post">
<div id='error'>
<p>有 3 個錯誤發生使得「會員」無法被儲存。</p>
</div>
<dl>
<dt><div class="error"><label for="person_profile_name">姓名</label></div></dt>
<dd><input class="textfield" id="person_profile_name" name="person[profile][name]" size="30" type="text" value="" /></dd>
<dd class="error">不能是空白字元</dd>
<dt><div class="error"><label for="person_username">登陸名</label></div></dt>
<dd><input class="textfield" id="person_username" name="person[username]" size="30" type="text" value="" /></dd>
<dd class="error">不能是空白字元</dd>
<dt><div class="error"><label for="person_email">電郵地址</label></div></dt>
<dd><input class="textfield" id="person_email" name="person[email]" size="30" type="text" value="" /></dd>
<dd class="error">不能是空白字元</dd>
<dt><label for="person_password">登陸密碼</label></dt>
<dd><input class="textfield" id="person_password" name="person[password]" size="30" type="password" /></dd>
<dt><label for="person_password_confirmation">確認密碼</label></dt>
<dd><input class="textfield" id="person_password_confirmation" name="person[password_confirmation]" size="30" type="password" value="" /></dd>
<dd><input id="person_submit" name="commit" type="submit" value="注冊會員" /></dd>
</dl>
</form>
- 大小: 31.8 KB
分享到:
相关推荐
https://xiaofeng.iteye.com/blog/642233,博主分享了一个使用ValidationEngine实现的表单验证示例,通过实际代码演示了如何配置和使用ValidationEngine,包括表单元素的标记、验证规则的设定以及错误提示的定制。...
- **错误提示**:验证失败时,框架支持自定义错误提示,便于用户理解并修正错误。 3. **使用流程** 使用android-form-validator通常包括以下几个步骤: - 引入依赖:在项目的build.gradle文件中添加库的依赖。 -...
通过分析和编辑这些文件,开发者可以定制自己的GitHub Pages站点,包括但不限于修改网页设计、添加新的页面、调整布局或者实现特定功能。如果你对HTML和网页开发感兴趣,深入研究这个项目将是一个很好的学习机会,...
JavaScript还可以处理错误提示,向用户显示友好、及时的反馈信息。 从压缩包的文件名"Formulario.github.io-main"来看,这可能是一个GitHub项目的主目录,其中可能包含HTML文件(如`index.html`)、CSS文件(如`...
5. **错误提示**:通过CSS,可以为表单验证错误提供视觉反馈,如改变错误输入字段的背景色或添加提示文本。 现在,我们来看看压缩包中的“webdev-pnj.github.io-main”文件。这个文件名表明它是项目的主要源代码...
压缩包中的文件名 "BenBaruch29.github.io-master" 提示我们这是项目的主分支,通常在GitHub上,"master"分支是默认的主分支,包含了项目的核心代码和资源。这个文件夹可能包含HTML文件、CSS样式表、JavaScript脚本...
这个插件允许开发者自定义验证规则和错误提示样式,从而实现用户友好的交互体验。在本文中,我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先,我们从标题"jquery validate 验证自定义样式"开始...
4. **交互反馈**:登录过程中,用户输入时的实时反馈很重要,比如输入框获得焦点时的边框变化、错误提示的显示等,这些都可以通过CSS伪类(`:hover`, `:focus`, `:valid`, `:invalid`等)来实现。 5. **动画效果**...
- 提供表单验证提示:在用户输入错误时,显示错误提示信息。 - 显示帮助信息:为用户提供关于页面元素功能的详细说明。 - 用户操作反馈:在按钮点击、链接跳转等操作后显示短暂提示。 - 图标提示:为图标添加文字...
7. **通知和提示**:提供成功、警告、错误等不同类型的反馈信息。 8. **图标库**:包括各种矢量图标,用于美化界面和指示功能。 9. **布局选项**:如侧边栏、顶部菜单、固定和流式布局等。 10. **JavaScript插件**:...
通过在Emacs中集成Languagetool,用户可以直接在编辑环境中实时获得这些错误提示,无需离开Emacs界面去使用其他外部应用。 在"emacs-languagetool.github.io"的登录页面,用户可能需要注册或登录以获取更高级的功能...
前端和后端都需要适当的错误处理机制,提供友好的错误提示,并能记录异常信息以便于调试。 10. **API和支付网关集成**:如果涉及在线支付,项目可能需要集成第三方支付网关,如PayPal、Stripe等,这些网关提供了API...
例如,你可以使用`toastr.info()`显示信息提示,`toastr.warning()`显示警告提示,`toastr.error()`显示错误提示,以及`toastr.success()`显示成功提示。以下是如何使用Toastr显示一个警告消息的示例: ```...
8. `404.html`文件:当用户尝试访问不存在的页面时,会显示这个定制的错误页面。这是一个提供友好提示和引导用户回到主站的好机会。 通过深入研究`chenanbao.github.io-master`中的内容,我们可以学习到静态网站的...
它包含了多种预设的验证规则和错误提示样式,可以轻松地应用到任何HTML表单上。 ### 2. 安装步骤 1. **下载**:首先,你需要从GitHub或其他可靠的源下载jQuery Validation Engine的最新版本。在这个例子中,文件名...
在上面的例子中,`rules`对象定义了字段的验证规则,而`messages`则定制了错误提示信息。 3. **自定义验证规则**:如果默认的验证规则不足以满足需求,可以创建自定义规则。使用`.addMethod()`方法定义新规则,...
3. **用户反馈**:Contacto-1.0 可能具有实时反馈机制,如错误消息显示和成功提交提示,这些都是通过 JavaScript 实现的。 4. **自动回复**:通过 Google Apps Script,可以设置自动回复邮件,通知用户他们的消息已...
例如,有些情况下,我们可能希望在用户提交表单时才进行验证,或者我们想要统一处理错误提示。为了解决这些问题,开发者通常会寻找或创建封装的验证插件,如`w5cValidator`。 `w5cValidator`是一个针对AngularJS的...
例如,我们可以使用CSS来改变表单字段的边框、背景色、字体样式,甚至创建自定义的验证错误提示。同时,通过定位和浮动技术,可以调整表单元素的位置,使其适应各种屏幕尺寸,实现响应式设计。CSS3还引入了诸如伪类...
本项目将介绍如何使用数据绑定和自定义验证规则来检查用户输入,并提供相应的错误提示。 8. **平台特定功能** 虽然 Xamarin.Forms 提供了跨平台的抽象,但有时我们需要利用特定平台的功能。项目可能包含了如何使用...