Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multiple password fields issue #137

Open
michaeldobbins opened this issue May 31, 2013 · 4 comments
Open

Multiple password fields issue #137

michaeldobbins opened this issue May 31, 2013 · 4 comments

Comments

@michaeldobbins
Copy link

Validating a form with basic javascript form handling with Password field and Confirm Password field. When submission fails, first password field becomes inaccessible. Hard to describe issue, so for the purpose of seeing it in action, ive made the below changes to the demo.html code:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>HTML5 placeholder jQuery Plugin</title>
  <style>
   body, input, textarea { font: 1em/1.4 Helvetica, Arial; }
   label code { cursor: pointer; float: left; width: 150px; }
   input { width: 14em; }
   textarea { height: 5em; width: 20em; }
   .placeholder { color: #aaa; }
   .note { border: 1px solid orange; padding: 1em; background: #ffffe0; }
    /* #p { background: lime; } */
  </style>
  <SCRIPT type="text/javascript">
    function validateForm()
     {
       return false;
     }

    //--> 
     </SCRIPT> 
 </head>
 <body>
  <h1>HTML5 Placeholder jQuery Plugin</h1>
  <p>Check out <a href="https://github.com/mathiasbynens/jquery-placeholder">the HTML5 Placeholder jQuery Plugin project page on GitHub</a>.</p>
  <pre><code>$(function() {<br> $('input, textarea').placeholder();<br>});</code></pre>
  <form method="POST" action="?" name="myForm" onsubmit="return validateForm()" > 

   <p><label><code>type=email</code> <input type="email" name="email" placeholder="e.g. [email protected]"></label></p>

   <p><label for="p"><code>type=password</code> </label><input type="password" name="password" placeholder="e.g. hunter2" id="p"></p>

   <p><label for="p2"><code>type=password</code> </label><input type="password" name="password2" placeholder="e.g. hunter2" id="p2"></p>

   <p><label for="dob"><code>type=text</code> </label><input type="text" name="dob" placeholder="birthdate"></p>

   <p><label for="chk-legal"><code>type=checkbox</code></label><input type="checkbox" name="chk-legal" value="Yes" /></p>


   <p><input type="submit" value="type=submit"></p>
  </form>
  <p>— <a href="//mathiasbynens.be/" title="Mathias Bynens, front-end developer">Mathias</a></p>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="js/plugins/jquery.placeholder.min.js"></script>
  <script>
   // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
   // $.fn.hide = function() { return this; }
   // Then uncomment the last rule in the <style> element (in the <head>).
   $(function() {
    // Invoke the plugin
    $('input, textarea').placeholder();
    // That’s it, really.
    // Now display a message if the browser supports placeholder natively
    var html;
    if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
     html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
    } else if ($.fn.placeholder.input) {
     html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
    }
    if (html) {
     $('<p class="note">' + html + '</p>').insertAfter('form');
    }
   });
  </script>
 </body>
</html>

Apologies for the long message, and if this isnt the proper way to explain the issue.

Note: This issue occurs in IE9 and Firefox, but seems ok in Chrome.

Thanks
@bkvirendra
Copy link

I m facing the same issue on my form!

I have the password and confirm password field, and I display a message when the user submits blank passwords or incorrect password.

But for me, both of my password fields are inaccessible on IE.

@amerikan
Copy link
Collaborator

Can you try this: https://github.com/mathiasbynens/jquery-placeholder/pull/230/files

I had similar issue and I was able to resolve it that way.

@amerikan
Copy link
Collaborator

@bkvirendra can you test with latest version of plugin or 2.0.9?

@yangkennyk
Copy link

+1 still having this issue with latest version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@amerikan @bkvirendra @michaeldobbins @yangkennyk