Been trying to get this working for a few hours now but can't seem to get a result. Any advice would be welcomed with open arms! I'm using the JQuery Validation Plugin: http://jqueryvalidation.org/validate/. I have included the following into my file:

<script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/plugins/jquery-validation/dist/additional-methods.min.js"></script>

My form:

<form action="<?php $_SERVER['PHP_SELF'] ?>" method="post" class="form-vertical" name="personalInfo" id="personalInfo">

    <label class="control-label">First Name</label>
    <input type="text" class="m-wrap span8" name="fn" id="fn" value="<?php echo $userInfo['fn'] ?>"/>

    <label class="control-label">Last Name</label>
    <input type="text" class="m-wrap span8" name="ln" id="ln" value="<?php echo $userInfo['ln'] ?>"/>

    <label class="control-label">Email Address</label>
    <input type="text" class="m-wrap span8" name="email" id="email" value="<?php echo $userInfo['authemail'] ?>"/>

    <label class="control-label">Mobile Number</label>
    <input type="text" class="m-wrap span8" name="authmob" id="authmob" value="<?php echo $userInfo['authmob'] ?>"/>

    <label class="control-label">Telephone</label>
    <input type="text" class="m-wrap span8" name="authlan" id="authlan" value="<?php echo $userInfo['authlan'] ?>"/>

    <label class="control-label">Company</label>
    <input type="text" class="m-wrap span8" name="company" id="company" value="<?php echo $userInfo['company'] ?>"/>

    <label class="control-label">Occupation</label>
    <input type="text" class="m-wrap span8" name="profession" id="profession" value="<?php echo $userInfo['profession'] ?>"/>

    <label class="control-label">Biography</label>
    <textarea class="span8 m-wrap" rows="5" name="bio" id="bio"><?php echo $userInfo['bio']; ?></textarea>

    <label class="control-label">Website Url</label>
    <input type="text" class="m-wrap span8" name="url" id="url" value="<?php echo $userInfo['url'] ?>"/>

    <label class="control-label">Facebook</label>
    <input type="text" class="m-wrap span8" name="facebook" id="facebook" value="<?php echo $userInfo['facebook'] ?>"/>

    <label class="control-label">LinkedIn</label>
    <input type="text" class="m-wrap span8" name="linkedin" id="linkedin" value="<?php echo $userInfo['linkedin'] ?>"/>

    <label class="control-label">Twitter</label>
    <input type="text" class="m-wrap span8" name="twitter" id="twitter" value="<?php echo $userInfo['twitter'] ?>"/>

    <button type="submit" name="personalInfo" id="personalInfo" class="btn green">
    <i style="margin-right: 12px;" class="icon-save"></i> Save Information 
    </button>

</form>

My JavaScript using the plugin:

   $('#personalInfo').validate({
        errorElement: 'label', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            fn: {
                required: true,
                minlength: 2,
                lettersonly: true
            },
            ln: {
                required: true,
                minlength: 2,
                lettersonly: true
            },
            email: {
                required: false,
                minlength: 6,
                email: true
            },
            authmob: {
                required: false,
                number: true
            },

            authlan: {
                required: false,
                number: true
            },

            company: {
                required: false
            },

            profession: {
                required: false,
                minlength: 2
            },

            bio: {
                required: false,
                minlength: 50
            },

            url: {
                required: false,
                url: true
            },

            facebook: {
                required: false,
                url: true,
                minlength: 20
            },
            linkedin: {
                required: false,
                url: true,
                minlength: 20
            },
            twitter: {
                required: false,
                url: true,
                minlength: 20
            }

        },

        messages: {
            fn: {
                required: "Please enter your first name.",
                minlength: "Minimum of 2 characters.",
                lettersonly: "Alphabetic characters only."
            },
            ln: {
                required: "Please enter your last name.",
                minlength: "Minimum of 2 characters.",
                lettersonly: "Alphabetic characters only."
            },
            email: {
                required: "Please enter your email address.",
                minlength: "Minimum of 6 characters",
                email: "Please enter a valid email address."
            },
            authmob: {
                number: "Please enter a valid mobile number."
            },

            authlan: {
                number: "Please enter a valid telephone number."
            },

            profession: {
                minlength: "Minimum of 2 characters."
            },

            bio: {
                minlength: "Minimum of 50 characters."
            },

            url: {
               url: "Please enter a valid URL."
            },

            facebook: {
                url: "Please enter a valid URL.",
                minlength: "Minimum of 20 characters."
            },
            linkedin: {
                url: "Please enter a valid URL.",
                minlength: "Minimum of 20 characters."
            },
            twitter: {
                url: "Please enter a valid URL.",
                minlength: "Minimum of 20 characters."
            }

        },
        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('.alert-error', $('#personalInfo')).show();
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.control-group').addClass('error'); // set error class to the control group
        },

        success: function (label) {
            label.closest('.control-group').removeClass('error');
            label.remove();
        },

        errorPlacement: function (error, element) {
            error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
        },

        submitHandler: function (form) {
            window.location.href = "profile.php";
        }
    });

It doesn't do anything whatsoever but that's probably because I'm not experienced with JS at all. Could someone please guide me in the right direction?

Member Avatar

LastMitch

It doesn't do anything whatsoever but that's probably because I'm not experienced with JS at all. Could someone please guide me in the right direction?

Go here:

http://forum.jquery.com/using-jquery-plugins

and post your question. Since you are not familiar is JS then there's no point of assisting you if you don't understand what I am saying nor doing.

I guess you forgot to trigger your .validate() call - either manually, or automatically after the DOMReady event (ie. using <script>$(){ $('#personalInfo').validate({ your options }); }</script> in the document somewhere.)

Also - very important - your submit button should use a different ID - you cannot re-use the ID that is on the form element (#personalInfo).

Instead of having a problem bout it .. Try this. Its a plugin for validation easy to use.

Happy Coding.