`
mimosa
  • 浏览: 4988 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

定制像github那樣的表單錯誤提示。

阅读更多
引用
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
分享到:
评论

相关推荐

    jquery表单验证插件validationEngine---个人修改

    https://xiaofeng.iteye.com/blog/642233,博主分享了一个使用ValidationEngine实现的表单验证示例,通过实际代码演示了如何配置和使用ValidationEngine,包括表单元素的标记、验证规则的设定以及错误提示的定制。...

    android-form-validator,一个简单的android表单验证。.zip

    - **错误提示**:验证失败时,框架支持自定义错误提示,便于用户理解并修正错误。 3. **使用流程** 使用android-form-validator通常包括以下几个步骤: - 引入依赖:在项目的build.gradle文件中添加库的依赖。 -...

    eloise05.github.io

    通过分析和编辑这些文件,开发者可以定制自己的GitHub Pages站点,包括但不限于修改网页设计、添加新的页面、调整布局或者实现特定功能。如果你对HTML和网页开发感兴趣,深入研究这个项目将是一个很好的学习机会,...

    Formulario.github.io:Forcadáriode cadastro com HTML,CSS和Javascript

    JavaScript还可以处理错误提示,向用户显示友好、及时的反馈信息。 从压缩包的文件名"Formulario.github.io-main"来看,这可能是一个GitHub项目的主目录,其中可能包含HTML文件(如`index.html`)、CSS文件(如`...

    webdev-pnj.github.io:联系我们

    5. **错误提示**:通过CSS,可以为表单验证错误提供视觉反馈,如改变错误输入字段的背景色或添加提示文本。 现在,我们来看看压缩包中的“webdev-pnj.github.io-main”文件。这个文件名表明它是项目的主要源代码...

    BenBaruch29.github.io

    压缩包中的文件名 "BenBaruch29.github.io-master" 提示我们这是项目的主分支,通常在GitHub上,"master"分支是默认的主分支,包含了项目的核心代码和资源。这个文件夹可能包含HTML文件、CSS样式表、JavaScript脚本...

    jquery validate 验证自定义样式

    这个插件允许开发者自定义验证规则和错误提示样式,从而实现用户友好的交互体验。在本文中,我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先,我们从标题"jquery validate 验证自定义样式"开始...

    fugabi.github.io:登陆页面

    4. **交互反馈**:登录过程中,用户输入时的实时反馈很重要,比如输入框获得焦点时的边框变化、错误提示的显示等,这些都可以通过CSS伪类(`:hover`, `:focus`, `:valid`, `:invalid`等)来实现。 5. **动画效果**...

    Jquery-poshytip实例应用

    - 提供表单验证提示:在用户输入错误时,显示错误提示信息。 - 显示帮助信息:为用户提供关于页面元素功能的详细说明。 - 用户操作反馈:在按钮点击、链接跳转等操作后显示短暂提示。 - 图标提示:为图标添加文字...

    优秀的bootstrap后台管理模板

    7. **通知和提示**:提供成功、警告、错误等不同类型的反馈信息。 8. **图标库**:包括各种矢量图标,用于美化界面和指示功能。 9. **布局选项**:如侧边栏、顶部菜单、固定和流式布局等。 10. **JavaScript插件**:...

    emacs-languagetool.github.io:emacs-languagetool的登录页面

    通过在Emacs中集成Languagetool,用户可以直接在编辑环境中实时获得这些错误提示,无需离开Emacs界面去使用其他外部应用。 在"emacs-languagetool.github.io"的登录页面,用户可能需要注册或登录以获取更高级的功能...

    Isha.sparksbank.github.io:两个用户之间的交易

    前端和后端都需要适当的错误处理机制,提供友好的错误提示,并能记录异常信息以便于调试。 10. **API和支付网关集成**:如果涉及在线支付,项目可能需要集成第三方支付网关,如PayPal、Stripe等,这些网关提供了API...

    Toastr警示框jq插件.zip

    例如,你可以使用`toastr.info()`显示信息提示,`toastr.warning()`显示警告提示,`toastr.error()`显示错误提示,以及`toastr.success()`显示成功提示。以下是如何使用Toastr显示一个警告消息的示例: ```...

    chenanbao.github.io:鲍勃博客

    8. `404.html`文件:当用户尝试访问不存在的页面时,会显示这个定制的错误页面。这是一个提供友好提示和引导用户回到主站的好机会。 通过深入研究`chenanbao.github.io-master`中的内容,我们可以学习到静态网站的...

    jQuery-Validation-Engine-master

    它包含了多种预设的验证规则和错误提示样式,可以轻松地应用到任何HTML表单上。 ### 2. 安装步骤 1. **下载**:首先,你需要从GitHub或其他可靠的源下载jQuery Validation Engine的最新版本。在这个例子中,文件名...

    JQuery实行数据验证

    在上面的例子中,`rules`对象定义了字段的验证规则,而`messages`则定制了错误提示信息。 3. **自定义验证规则**:如果默认的验证规则不足以满足需求,可以创建自定义规则。使用`.addMethod()`方法定义新规则,...

    Contacto-1.0:用于创建联系表单的 Google Apps 脚本

    3. **用户反馈**:Contacto-1.0 可能具有实时反馈机制,如错误消息显示和成功提交提示,这些都是通过 JavaScript 实现的。 4. **自动回复**:通过 Google Apps Script,可以设置自动回复邮件,通知用户他们的消息已...

    AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】

    例如,有些情况下,我们可能希望在用户提交表单时才进行验证,或者我们想要统一处理错误提示。为了解决这些问题,开发者通常会寻找或创建封装的验证插件,如`w5cValidator`。 `w5cValidator`是一个针对AngularJS的...

    novalidate:HTML5 内联验证很棒,直到您也想测试服务器端逻辑。

    例如,我们可以使用CSS来改变表单字段的边框、背景色、字体样式,甚至创建自定义的验证错误提示。同时,通过定位和浮动技术,可以调整表单元素的位置,使其适应各种屏幕尺寸,实现响应式设计。CSS3还引入了诸如伪类...

    xamarin-forms-better-forms:此存储库包含brax.tv系列“使用Xamarin.Forms更好的表单”的源代码。-Form source code

    本项目将介绍如何使用数据绑定和自定义验证规则来检查用户输入,并提供相应的错误提示。 8. **平台特定功能** 虽然 Xamarin.Forms 提供了跨平台的抽象,但有时我们需要利用特定平台的功能。项目可能包含了如何使用...

Global site tag (gtag.js) - Google Analytics