Javascript not validating password in Form

Question

Hi I have looked around online and I am aware that similar questions have been asked, however, I am unable to find a suitable solution to my problem. I need this code to be password validated, the problem is that I'm not directly working with an <input> field therefore I've been unable to figure out how to implement JS.

Here is the HTML (it's implemented using ruby-on-rails, this is all the 'HTML' side that I can see (full code in fiddle below))

<form accept-charset='utf-8' method='post' name="form" action='register'  class="registerform" onsubmit="return validate_form()">
<h3 class="registernospace">Contact Information</h3>
<table>
   <tbody>
      <tr><td class="registerrowspace" colspan="2">The Password must be at least 6 characters  long and should contain a mixture of lower case letters, upper case letters, and numbers.<br  />The Confirm Password must match the Password.</td></tr>
      <tr><th class="registerrowspace">Password</th><td id="password1" class="registerrowspace"><%= field('password') %></td></tr>
      <tr><th class="registerrowspace">Confirm Password</th><td id="password2" class="registerrowspace"><%= field('password') %></td></tr>
      <tr><th class="registerrowspace">Date of Birth</th><td class="registerrowspace">
   </tbody>
</table>

<% end %>
<input type='hidden' name='register_submitted' value='yes'/>
<p><input type='submit' class="button" value='Register Now' /></p>
</form>

And I have tried Implementing some JS (but being unfamiliar with the language I haven't been able to get it working, but I was trying to do something like this:

<script type="text/javascript">
  function validate_form()
  {
  var passw = document.getElementById('password1').value;
  if(passw.value.length < 6 ) {
    alert("Error: Password must contain at least six characters!");
    form.password.focus();
    return false;
  }
  return true;
  }
</script>

So I was hoping it validates and raises a message if its blank, if its < 6 chars and if it does not include a Uppercase and a number. Although I'm aware I haven't introduced the latter in the code, I couldn't even get the <6 to work.

Also I have other validations (which were built by default which work) and you can see the full:

Fiddle code

Live Website

Answer 1

if(passw.value.length < 6 ) {

should be

if(passw.length < 6 ) {

because you already get its value

var passw = document.getElementById('password1').value;

UPDATE:

password1 is <td> id not of password feild
i just check your link, it was giving error passw is undefined in console, you password field id is password-input-0, so use

var passw = document.getElementById('password-input-0').value;

Answer 2

Instead of using if(passw.value.length < 6 ) use if(passw.length < 6 ) you have already value of password you only need to check for size. Also, Your textfield name is wrong. 'Password1' is td name not password textfield. Please check and correct.

Answer 3

if(passw.length < 5 ) //here should be 5

Page refreshes when you click the button :you don't call e.preventDefault(); I think you should listen 'submit' event. In the 'listen' function you may validate the length of the input and prevent it's default behavior.

Answer 4

^.*(?=.{6,})(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$

---

^.*              : Start
(?=.{6,})        : Length
(?=.*[a-zA-Z])   : Letters
(?=.*\d)         : Digits
(?=.*[!#$%&? "]) : Special characters
.*$              : End



function validatePassword() {
    var newPassword = document.getElementById('changePasswordForm').newPassword.value;
    var regularExpression  = ^.*(?=.{6,})(?=.*[a-zA-Z])(?=.*\d)(?=.*[!#$%&? "]).*$/;
    alert(newPassword); 
    if(!regularExpression.test(newPassword)) {
        alert("password should contain atleast one number and one special character");
        return false;
    }
}