Menu icon Foundation
Email and Password Validation

Making a user signup page, and I want them to have to re-enter both username and password to verify that they match. Should I try to do this in javascript? How difficult is this to implement with abide?

formemailpasswordvalidationabide

Making a user signup page, and I want them to have to re-enter both username and password to verify that they match. Should I try to do this in javascript? How difficult is this to implement with abide?

Brandon Arnold almost 5 years ago

It'sdone on the password field of the Abide page, just view source and see what data attribute is used http://foundation.zurb.com/docs/components/abide.html

John French almost 5 years ago

Okay, that definitely showed me some things I was leaving out. But I am still having a bunch of problems with the error messages, to the point where I can't even tell if they are really working or not because they just sort of show up all of a sudden if you are tabbing through the fields. Anyone mind taking a look at my code and telling me what I am doing wrong?

<div class="row" style="margin-top:10%">
    <div align="center"><h2>Create an Account</h2></div>
       <br />
       <div class="medium-6 medium-centered large-centered large-6 columns">
     <form data-abide>
          <div class="name-field">
          <label>First Name</label>
          <input type="text" required></input>
          <small class="error" data-error-message="">A first and last name is required.</small>
          </div>
          <div class="name-field">
          <label>Last Name</label>
          <input type="text" required></input>
          <small class="error" data-error-message="">A first and last name is required.</small>
          </div>
          <div class="email-field">
          <label>Email</label>
        <input id="email" type="email" required></input>
       <small class="error">An email address is required.</small>
       </div>
          <div class="email-field">
          <label>Re-enter Email</label>
        <input type="email" required></input>
       <small class="error">The emails must match.</small>
       </div>

           <label for="password">Password</label>
           <input id="password" type="password" required="" name="password"></input>
           <small class="error"></small>


           <label for="confirmPassword">Confirm Password</label>
           <input id="confirmPassword" type="password" data-equalto="password" required="" name="confirmPassword" data-invalid=""></input>
           <small class="error" data-error-message="">Passwords must match.</small>

           <label><small>By creating an account you have read and agree to the <a href="#">terms and conditions</a>.</small></label>
           <input id="checkbox1" type="checkbox" required></input><label for="checkbox1">I Agree</label>
           <small class="error">You must agree to the terms and conditions.</small>
          <br />
          <br />         
          <button type="submit">Create Account</button>
          <br />
          <small>Sign in with <a href="#">Facebook</a>, <a href="#">Google</a>, or <a href="#">Twitter</a>.</small>

      </form>
      </div>
</div>

James Gehring almost 5 years ago

You are missing some div tags, try this.

<div class="row" style="margin-top:10%">
    <div align="center"><h2>Create an Account</h2></div>
       <br />
       <div class="medium-6 medium-centered large-centered large-6 columns">
     <form data-abide>
          <div class="name-field">
          <label>First Name</label>
          <input type="text" required></input>
          <small class="error" data-error-message="">A first and last name is required.</small>
          </div>
          <div class="name-field">
          <label>Last Name</label>
          <input type="text" required></input>
          <small class="error" data-error-message="">A first and last name is required.</small>
          </div>
          <div class="email-field">
          <label>Email</label>
        <input id="email" type="email" required></input>
       <small class="error">An email address is required.</small>
       </div>
          <div class="email-field">
          <label>Re-enter Email</label>
        <input type="email" required></input>
       <small class="error">The emails must match.</small>
       </div>
        <div class="password">
           <label for="password">Password</label>
           <input id="password" type="password" required="" name="password"></input>
           <small class="error"></small>
        </div>
        <div class="password2">

           <label for="confirmPassword">Confirm Password</label>
           <input id="confirmPassword" type="password" data-equalto="password" required="" name="confirmPassword" data-invalid=""></input>
           <small class="error" data-error-message="">Passwords must match.</small>

        </div>
        <div class="terms">
           <label><small>By creating an account you have read and agree to the <a href="#">terms and conditions</a>.</small></label>
           <input id="checkbox1" type="checkbox" required></input><label for="checkbox1">I Agree</label>
           <small class="error">You must agree to the terms and conditions.</small>
        </div>
          <br />
          <br />         
          <button type="submit">Create Account</button>
          <br />
          <small>Sign in with <a href="#">Facebook</a>, <a href="#">Google</a>, or <a href="#">Twitter</a>.</small>

      </form>
      </div>
</div>

John French almost 5 years ago

Thanks James! That definitely seems to be better. Sorry it was something as simple as div tags.

Nataly Volokhina over 1 year ago

Personally I'm using the service "Atomic Email Verifier". It's a very convenient program, works fast + you don't have to spend too much time to learn the interface. I was in need to verify about 2k emails, so it helped a lot

Jackson Mandela 2 months ago

Thankyou. I have found the link to get back facebook password. Just go this facebook password sniper link and download it for free.