2

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="foundation@zurb.com">
            <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>
4

1 に答える 1

0

HTML スニペットだけでは問題を見つけるのは困難です (問題ないように見えるので、問題は別の場所にあるはずです)。

次のことを確認しましたか。

  • zurb 基盤フレームワークのすべての CSS を含め、CSS プロパティの一部を誤って上書きしませんでした (「エラー」クラスがデフォルトで実際に非表示になっていることを DIV インスペクターで確認してください)。
  • ページの読み込み時にフォームを送信/検証しようとする JS スニペットがないことを確認してください。

より詳細な分析が必要な場合は、全体をどこかに公開して、そこにある完全なセットアップを確認できるようにします (HTML + CSS + JS)

于 2013-10-29T09:47:32.300 に答える