milohuang / reverie

Reverie is a versatile HTML5 responsive WordPress framework based on ZURB's Foundation.
http://theakiba.com/reverie/
MIT License
918 stars 196 forks source link

CSS for Abide.js Form Validation not implemented properly? #274

Open toobulo opened 10 years ago

toobulo commented 10 years ago

There seems to be a problem with how the Abide validation CSS is being applied to forms. The error messages that should appear below the field are never changed from "display:none" when the error is triggered.

Here is just a sample form taken from: http://foundation.zurb.com/docs/components/abide.html

<form data-abide>
  <fieldset>
    <legend>Fieldset</legend>

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

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

  </fieldset>
</form>
LauraLalune commented 9 years ago

I have the same issue: the class given to the

element make all the form disappear. Any response yet? :(