Trouble validating form using jquery (plugin)

Question

The plugin appears to be working fine. If I leave my two fields empty I get notified that they are required and that they have to be a valid number.

The problem I'm having is if I fill in the two text fields with correct data and hit my add button, I'm hitting the error in my code below. Data still gets sent to my controller and my Add is performed but the alert is firing off from my error section.

    $(document).ready(function (e) {
            $("#frmOverride").validate({
                rules: {
                    maintenancePercentage: {
                        required: true,
                        number: true
                    },
                    officePercentage: {
                        required: true,
                        number: true
                    }
                }
            });
     }

This section is in my save button's click event:

        var seg1 = dataItem.Seg1_Code;
        var maintPercentage = $("#maintenancePercentage").val();
        var officePercentage = $("#officePercentage").val();

        if ($('#frmOverride').validate().form()) {
            $.ajax({
                type: "POST",
                url: "/PayrollMarkup/AddPayrollMarkupOverride",
                data: {
                    seg1: seg1,
                    maintenancePercentage: maintPercentage,
                    officePercentage: officePercentage
                },
                success: function (data) {
                    //console.log(data);
                    var window = $("#window").data("kendoWindow");
                    $('#window_wnd_title').text("");
                    window.close();
                    $("#maintenancePercentage").val('');
                    $("#officePercentage").val('');

                    readDefaultsGrid();

                    readNotDefaultsGrid();
                },

                error: function (e) {
                    console.log(e);
                    alert("There was an error setting custom values. Maintenance % and Office % are required.");
                }
            });
        }

Sparky · Accepted Answer · 2013-03-27 15:30:48Z

1

There is no need to do this...

if ($('#frmOverride').validate().form()) {
        $.ajax({ ...

And you certainly do not want to do any of this inside of a click event handler. That's because the jQuery Validate plugin is already capturing the click event, checking for a valid form, and providing a submitHandler callback function which was fully intended for submitting via ajax.

As per documentation,

submitHandler, Callback, Default: default (native) form submit

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

$(document).ready(function () {

    $("#frmOverride").validate({
        rules: {
            maintenancePercentage: {
                required: true,
                number: true
            },
            officePercentage: {
                required: true,
                number: true
            }
        },
        submitHandler: function (form) {
            // your ajax goes here
            return false; // to block page redirect since you're using ajax
        }
    });

});

Simple DEMO: http://jsfiddle.net/4kn3y/

edited Mar 27, 2013 at 15:30

answered Mar 27, 2013 at 15:25

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mithrilhall Over a year ago

Thank you. I skimmed the documentation a little to quickly.

Sparky Over a year ago

@Mithrilhall, no problem, it's probably the most common mistake.

Bhuvan Over a year ago

what if I need to change the error message with my own custom message?

Sparky Over a year ago

@bhuvan, that's off-topic so I refer you to the messages option in the documentation. Otherwise, feel free to post a new question. However, please click here first.

Lajos Arpad · Accepted Answer · 2013-03-27 15:00:37Z

1

You need to clean up your code, your code is searching for the same tag 4(!) times.

Instead of repeating $('#PayrollMarkupDefaultsGrid').data("kendoGrid") four times store it in a variable and use its methods and member through that variable.

As for your problem, I believe your kendo object is not initialized yet when you already try to use it. I believe that your code throws the exception here:

$('#PayrollMarkupDefaultsGrid').data("kendoGrid").dataSource.read();

because either the tag doesn't exist or it is not initialized as a kendo object or the kendo object doesn't have a public dataSource member or the dataSource member doesn't have a read() function. Please check these and let me know of your results.

answered Mar 27, 2013 at 15:00

Lajos Arpad

80.4k42 gold badges123 silver badges234 bronze badges

1 Comment

Mithrilhall Over a year ago

I cleaned up the code a little as you recommended (thank you) but I'm not seeing any errors in my console.

Collectives™ on Stack Overflow

Trouble validating form using jquery (plugin)

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related