Hello.

I am rebuilding a registration page and the accompanying form.

I am at a point of implementing jQuery for password validation.

It will not validate nor does it give error messages.

I have researched this on other sites but nothing so far seems to work at all.

Please see code below and thank you in advance:

Note: I do realize I have a form within a form. I do not know if this is good, standard, proper or may be causing problems.

`

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>

</head>
<body>
<form method = 'post' action = 'jTest2.3.html' id = 'DemoForm' name = 'DemoForm'>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br /> 
    <form id="formCheckPassword">
    <input type="password" class="form-control" name="password" id="password"/>
    <input type="password" class="form-control" name="cfmPassword" id="cfmPassword" />
    <input type="submit" value="submit"/>
 </form>

<form>
<table>
    <tr>
        <td>Password</td>
        <td>
            <label for="pass"></label>
            <input id="pass" name="pass" type="password" value="" />
        </td>
    </tr>
    <tr>
        <td>Password confirm</td>
        <td>
            <label for="pass2"></label>
            <input id="pass2" name="pass2" type="password" value="" />
        </td>
    </tr>
</table>
<input type="submit" name="save" value="Save" />
</form>

</form>

<div id="test">
</div>

<!--Script to disable Submit button --> 
<script>
(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
</script>

<!--Rules & Messages-->

<!--Username-->



<!--Email-->
      <script src = 'jquery.validate.min.js'></script>    
      $("#formCheckPassword").validate({
           rules: {
               password: { 
                 required: true,
                    minlength: 6,
                    maxlength: 10,

               } , 

                   cfmPassword: { 
                    equalTo: "#password",
                     minlength: 6,
                     maxlength: 10
               }


           },
     messages:{
         password: { 
                 required:"the password is required"

               }
     }

       }); $("#formCheckPassword").validate({
           rules: {
               password: { 
                 required: true,
                    minlength: 6,
                    maxlength: 10,

               } , 

                   cfmPassword: { 
                    equalTo: "#password",
                     minlength: 6,
                     maxlength: 10
               }


           },
     messages:{
         password: { 
                 required:"the password is required"

               }
     }

       });

 <!--Password Validation-->
<script src = 'jquery.validate.min.js'></script> 
      <script>


$(function () {
$.validator.setDefaults({
    submitHandler: function() {
        alert("submitted!");
    }
});
// validate signup form on keyup and submit
$("DemoForm").validate({
    rules: {
        pass: {
            required: true,
            minlength: 5
        },
        pass2: {
            required: true,
            minlength: 5,
            equalTo: "#pass"
        }
    },
    messages: {
        pass: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
        },
        pass2: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long",
            equalTo: "Please enter the same password as above"
        }
    }
});
      </script>

</body>

</html>

`

Recommended Answers

All 3 Replies

I realized I made an error in posting the code here, duplicating code that should not be. That does not solve the error.

I posted the password code twice here in the original post.

THIS is what I had originally been working with but does not work for password validation or messages:

`

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>jQuery Form Validation</title>

</head>
<body>
<form method = 'post' action = 'jTest1.8.html' id = 'DemoForm' name =   'DemoForm'>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />     
    Password<br />
    <input type="password" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="password" id="v_pass_input" name="v_password" /><br />
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>
<div id="test">
</div>

<!--Script to disable Submit button --> 
<script>
(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
</script>

<!--Rules & Messages-->

<!--Username-->



<!--Email-->
      <script src = 'jquery.validate.min.js'></script>    
      <script>
         $('#DemoForm').validate ({
            rules: {
                        'email': {
                                    required:'true',
                                    email: 'true',
                                    }
                      },
                      messages:{
                           'email':{
                           required:'Please submit your email.',
                           email:'Enter a valid email.',
                                       }
                                       },


                                                   });
      </script>


</body>

</html>

<!--Password Validation-->
<script src = 'jquery.validate.min.js'></script>
       <script>
 $('#DemoForm').validate({
           rules: {
               'pass_input': { 
                 required: true,
                    minlength: 8,
                    maxlength: 12,

               } , 

                   'v_pass_input': { 
                     equalTo: "#password",
                     minlength: 8,
                     maxlength: 12
               }


           },
     messages:{
         password: { 
                 required:"the password is required"

               }
     }

       });
         </script>

`

Why do you add two links to 'jquery.validate.min.js' and also setup .validate() two times? Just add the link one time and also call one time the .validate() method with all the rules that you want.

And it really make it easier to us to help if you can setup a jsfiddle for your demo(should be quite simple).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.