Question

i am trying to add some realtime form validation for my registration page, however only my email input is displaying the either correct or error output that i tshould, and neither my username or password are, I have tried for the past couple of hours to see what is wrong, but i just can’t find any errors in the code that would be the cause. Hoping that someone can see the error.

Form code

 <form id="jform" action="" method="post" enctype="multipart/form-data">
                <div id="modal_content_left">
                Register

                <ul>

                    <li class="required" type="none">

                        <label>

                            <input type="text" class="reg_text tip" name="username" id="username" title="8 - 16 Characters" placeholder="Username*"/>

                        </label>

                        <label>
                             <br />
                            <input type="text" class="reg_text tip" name="email" id="email" title="Get Verified" placeholder="Email*"/>

                        </label>
                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="password" id="password" title="Min 8 Characters" placeholder="Password*"/>

                        </label>


                        <label>
                            <br />
                            <input type="password" class="reg_text tip" name="cpassword" id="cpassword" title="Min 8 Characters" placeholder="Verify Password*"/>
                        </label>
                    </li>


                </ul></form>

Jquery code

// JavaScript Document

$(document).ready(function(){
    jVal = {

            'username' : function() {

            $('body').append('<div id="usernameInfo" class="info"></div>');

            var ele = $('#username');
            var pos = ele.offset();



            var patt = /^(?=.*[a-z].*)\w{8,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },




        'email' : function() {

            $('body').append('<div id="emailInfo" class="info"></div>');

            var ele = $('#email');
            var pos = ele.offset();



            var patt = /^.+@.+[.].{2,}$/i;

            if(!patt.test(ele.val())) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }
        },

        'password' : function(){

            $('body').append('<div id="passwordInfo" class="info"></div>');


            var ele = $('#password');
            var pos = ele.offset();


            if(ele.val().length < 6) {
                jVal.errors = true;
                    ele.removeClass('correct').addClass('error');
                    ele.effect("shake", { times:3 }, 50);

            } else {
                    ele.removeClass('error').addClass('correct');
            }

        },





    $('#username').change(jVal.username);
    $('#email').change(jVal.email);
    $('#password').change(jVal.password);

    $('input[name="agree_cons"]').change(jVal.agree);
});

Answer 1

There’s nothing wrong with your code. It works if you include jQuery and jQuery UI.

Here’s a working fiddle. The only changes I made were:

1. Include jQuery
2. Include jQuery UI.
3. Add CSS declarations for .correct and .error

Double check that you are doing all of those things in your own code, and you should get the expected results.