默认显示zurb Foundation错误消息?

克里斯·霍夫

我正在Rails 4应用程序中使用foundation.abide.js,下面包括基本代码设置。不管我尝试什么或用谷歌搜索什么,我似乎都无法确定为什么默认表单始终显示红色错误消息。关于我所缺少的任何想法?

在此处输入图片说明

<div class="row">
  <div class="large-12 columns">
    <h2>Abide</h2>
    <h4 class="subheader">Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.</h4>

    <form class="custom" data-abide>
      <fieldset>
        <legend>Fieldset</legend>

        <div class="row">
          <div class="large-12 columns">
            <label for="password">Password <small>required</small></label>
            <input type="password" id="password" placeholder="LittleW0men." name="password" required>
            <small class="error" data-error-message>Passwords must be at least 8 characters with 1 capital letter, 1 number, and one special character.</small>
          </div>
        </div>

        <div class="row">
          <div class="large-12 columns">
            <label for="phone">Phone</label>
            <input type="tel" id="phone" placeholder="1 234-567-8910">
            <small class="error" data-error-message>Please enter a properly formatted telephone number.</small>
          </div>
        </div>

        <div class="row">
          <div class="large-4 columns">
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="[email protected]">
            <small class="error">Valid email required.</small>
          </div>
          <div class="large-4 columns">
            <label for="url">URL <small>required</small></label>
            <input type="url" id="url" placeholder="http://zurb.com" required>
            <small class="error" data-error-message>Valid URL required.</small>
          </div>
          <div class="large-4 columns">
            <div class="row collapse">
              <label for="customDropdown1">Hardest to find in grocery <small>required</small></label>
              <select id="customDropdown1" class="medium" required>
                <option value="">Select grocery item</option>
                <option value="first">Green Chilies</option>
                <option value="second">Raisins</option>
                <option value="third">Panko bread crumbs</option>
                <option value="fourth">Assistance</option>
              </select>
              <small class="error" data-error-message>Broke.</small>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="large-12 columns">
            <hr>
          </div>
        </div>

        <div class="row">
          <div class="large-6 columns">
            <label for="radio1"><input name="radio1" type="radio" id="radio1" required><span class="custom radio"></span> Radio Button 1</label>
            <label for="radio1"><input name="radio1" type="radio" id="radio1" required><span class="custom radio"></span> Radio Button 2</label>
            <label for="radio1"><input name="radio1" type="radio" id="radio1" required><span class="custom radio"></span> Radio Button 3</label>
          </div>
          <div class="large-6 columns">
            <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;" required><span class="custom checkbox"></span> Label for Checkbox</label>
            <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;" required><span class="custom checkbox checked"></span> Label for Checkbox</label>
            <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;" required><span class="custom checkbox checked"></span> Label for Checkbox</label>
          </div>
        </div>

        <div class="row">
          <div class="large-12 columns">
            <hr>
          </div>
        </div>

        <div class="row">
          <div class="large-12 columns">
            <label for="remarks">Closing Remarks</label>
            <textarea id="remarks" name="remarks" placeholder="Leave your remarks here."></textarea>
          </div>
        </div>

        <div class="row">
          <div class="large-12 columns">
            <button type="submit" class="medium button green">Submit</button>
          </div>
        </div>

      </fieldset>
    </form>

  </div>
</div>
拉赞

仅使用HTML片段很难找到问题(看起来不错,因此问题必须在其他地方)。

您是否确定:

  • 您包括了zurb基础框架中的所有CSS,并且DID不会意外覆盖某些CSS属性(请与DIV检查器确认默认情况下'error'类确实是隐藏的)
  • 确保您没有试图在页面加载时发送/验证表单的JS代码段

如果您想进行更详细的分析,请将整个内容发布到某个地方,以便我们可以看到您在那里拥有的完整设置(HTML + CSS + JS)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在全屏Zurb Foundation 4/5中进行行显示?

来自分类Dev

在错误消息中显示行号

来自分类Dev

轨道未显示-zurb Foundation V5

来自分类Dev

Zurb Foundation 5中带有SASS Mixins的自定义按钮组无法正确显示

来自分类Dev

Zurb Foundation Mobile版本未在手机上显示

来自分类Dev

登录显示错误消息

来自分类Dev

显示单独的错误消息

来自分类Dev

如何显示DataAnnotations的错误消息

来自分类Dev

显示幻灯片编号orbit.js Foundation 6 zurb

来自分类Dev

rspec显示错误消息

来自分类Dev

翻译默认的ClaimsExchange错误消息

来自分类Dev

模型在Foundation-zurb中显示Ajax调用的问题

来自分类Dev

如何更改Django表单显示的默认错误消息

来自分类Dev

我如何在全屏Zurb Foundation 4/5中进行行显示?

来自分类Dev

在CakePHP中显示错误消息

来自分类Dev

单击事件显示错误消息

来自分类Dev

错误消息部分未显示

来自分类Dev

错误消息拒绝显示[RoR]

来自分类Dev

MVC显示错误消息

来自分类Dev

错误消息无法正确显示

来自分类Dev

如何捕获游戏中的配置错误!2.1.5避免显示默认错误消息?

来自分类Dev

错误消息显示在php中

来自分类Dev

rsync失败,并显示错误消息

来自分类Dev

Centos 7显示错误消息

来自分类Dev

错误消息仅显示“错误”

来自分类Dev

处理EntityCommandExecutionException并显示错误消息

来自分类Dev

在 PHP 中显示错误消息

来自分类Dev

Rails 显示错误消息

来自分类Dev

WebApplicationException 未显示错误消息