0

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?

Edited by mmcdonald

4
Contributors
4
Replies
25
Views
4 Years
Discussion Span
Last Post by imBaCodes
0

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.

0

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.)

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.