CODEWITHSUNDEEP
jqueryjquery-validatevalidation
Mithrilhall
Mithrilhall

Reputation: 1502

Trouble validating form using jquery (plugin)

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.");
                }
            });
        }

Upvotes: 0

Views: 88

Answers (2)

Sparky
Sparky

Reputation: 98718

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/

Upvotes: 1

Lajos Arpad
Lajos Arpad

Reputation: 76414

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.

Upvotes: 1

Related Questions