using JQuery validate plugin

Question

[UPDATED]

I'm using JQuery Validate plugin to validate a simple form. It's form HTML:

<form id="commentForm">
<div id="ContactUsDIV">
    <div id="right">
        <div class="ContactFormInput">Subject:</div>
        <input id="ContactFormSubject" name="ContactFormSubject" type="text" class="input"/>
        <label for="ContactFormSubject" class="validationMessage"></label>

        <div class="ContactFormInput">Full Name:</div>
        <input id="FullName" name="FullName" type="text" class="input"/>
        <label for="FullName" class="validationMessage"></label>

        <div class="ContactFormInput">EMail:</div>
        <input id="EmailAddress" name="EmailAddress" type="text" class="inputLTR"/>
        <label for="EmailAddress" class="validationMessage"></label>

        <div>
            <input id="SendMessage" type="submit" value="Send" class="ContactFormSubmit"/>
        </div>
    </div>
    <div id="left">
        <div class="ContactFormInput">Message:</div>
        <textarea id="UserComment" cols="20" rows="2"></textarea>
        <label for="UserComment" class="validationMessage"></label>
    </div>

</div>
</form>

Java Script:

<script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function () { alert("submitted!"); }
    });

    $().ready(function () {

        // validate signup form on keyup and submit
        $("#commentForm").validate({
            rules: {
                ContactFormSubject: "required",
                FullName: "required",
                username: "required",
                EmailAddress: {
                    required: true,
                    email: true
                },
                UserComment: "required"
            },
            messages: {
                ContactFormSubject: "blah blah",
                FullName: "blah blah",
                username: "blah blah",
                email: "blah blah",
                UserComment:"blah blah"
            }
        });

    });
</script>

But when I click Send button nothing happens.

Available here: http://tinkerbin.com/wRh09opb

uttam · Accepted Answer · 2012-05-09 08:11:46Z

Try this for correct email validation messages

<script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function () { alert("submitted!"); }
    });

    $(document).ready(function () {

        // validate signup form on keyup and submit
        $("#commentForm").validate({
            rules: {
                ContactFormSubject: "required",
                FullName: "required",
                username: "required",
                EmailAddress: {
                    required: true,
                    email: true
                },
                UserComment: "required"
            },
            messages: {
                ContactFormSubject: "blah blah",
                FullName: "blah blah",
                username: "blah blah",
                EmailAddress: {required:"blah blah", email:"blah blah"},
                UserComment:"blah blah"
            }
        });

    });
</script>

yogeswaran K · Accepted Answer · 2012-05-09 09:06:20Z

1

Instead of ContactFormSubject: "required"

use like this

rules:

  ContactFormSubject: {
                required: true }

messages:

ContactFormSubject: { required : "Please fill the field" }

Sample:

$("#AdditionalDetailsForm").validate({
    rules: {
        ignore: ":not(:visible)",
        Account_Number: {
            required: true
        },
        BaseJurisdiction: {
            required: true
        }
    },
    messages: {
        Account_Number: {
            required: "<br/> Please enter the field"
        },
        BaseJurisdiction: {
            required: "<br/> Please enter the field"
        }
    }
});

edited May 9, 2012 at 9:06

answered May 9, 2012 at 8:12

yogeswaran K

2,2988 gold badges29 silver badges45 bronze badges

1 Comment

yogeswaran K Over a year ago

if u r submitting the form using jquery like $('#formId').submit(); Use this if( $("#commentForm").valid()){ $('#formId').submit(); }

adrien · Accepted Answer · 2012-05-09 08:06:37Z

Try whith this Javascript:

<script type="text/javascript">
    $.validator.setDefaults({
        submitHandler: function () { alert("submitted!"); }
    });

    $.ready(function () {

        // validate signup form on keyup and submit
        $("#commentForm").validate({
            rules: {
                ContactFormSubject: "required",
                FullName: "required",
                username: "required",
                EmailAddress: {
                    required: true,
                    email: true
                },
                UserComment: "required"
            },
            messages: {
                ContactFormSubject: "blah blah",
                FullName: "blah blah",
                username: "blah blah",
                email: "blah blah",
                UserComment:"blah blah"
            }
        });

    });
</script>

Collectives™ on Stack Overflow

using JQuery validate plugin

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related