jQuery validate and deferred objects

Question

I have a form that is using the jQuery validate functionality, with some custom functions validating the values with ajax posts.

My problem is when I submit the form, I have the submitHandler do ajax post to check if the field is valid by checking in the DB. I only want the form to submit if the value returned is valid.

(function ( $ ) {
    $.fn.checkValidSubDomain = function (params) {
        params['siteID'] = wlSiteID;
        var deferred = $.Deferred();
        var promise = deferred.promise();

        $("div#"+$(this).attr('id')+"Info").html(copyItems["info_checkingStatus"]);
        var jqxhr = $(this).ajaxPost('checkValidSubDomain', params)
        jqxhr.success(function (data){
            if (data.validSubdomain) {
                $("div#"+$(this).attr('id')+"Info").html(copyItems["info_"+$(this).attr('id')+"Available"]);
                deferred.resolve(data);
            } else {
                $("div#"+$(this).attr('id')+"Info").html(copyItems["err_"+$(this).attr('id')+"Unavailable"]);
                deferred.reject(jqxhr, 'error');
            }
        })
        jqxhr.error(function (jqXHR, status, error){
            $("div#"+$(this).attr('id')+"Info").html(copyItems["err_"+$(this).attr('id')+"Unavailable"]);
            deferred.reject(jqXHR, status, error);
        });
        return promise;
    };
})(jQuery);

var validationRules = {
    submitHandler: function(form) {
        var promise;
        if ($('input[name="domainSetting"]:checked').val() == 'subDomain') {
            alert("checking subdomain - " + $('#subDomainSiteName').val())
            promise = $('#subDomainSiteName').checkValidSubDomain({'subDomain': $('#subDomainSiteName').val(), 'domain':$("#domainSelect option:selected").val()});
        } 
        promise.done(function() {
            form.submit();
        });
        return false;
    },
    onfocusout: false,
    onkeyup: false,
    rules: {
        subDomainSiteName: {
            required: {
                depends: '#domainSettingSubDomain:checked'
            }
        }
    }
};
$('#domainSettingsFRM').formValidation(validationRules);

I'm not sure how I get to the form to only submit if the field is valid. Currently, it's just showing the alert and then submitting the form regardless of the value.

Any help appreciated

EDIT

I think I just figured it out. Once the async ajax call is finished, the promise.done() will trigger. At that point I simply check the state to see if it is resolved or rejected. Changing the code to the following seems to do the trick.

promise.done(function() {
    if (promise.state() == "resolved") {
        form.submit();
    }
});

If, as it would appear, you only ever invoke `checkValidSubDomain()` on `$('#subDomainSiteName')`, then there's little point writing `checkValidSubDomain()` as a jQuery plugin. The only reason not to do everything inside the submitHander would be a scope issue to do with `wlSiteID` but that could be overcome by more simple means. — Roamer-1888, Aug 28 '14 at 15:16

Fabrizio Calderan · Accepted Answer · 2014-08-28T04:23:20.867

2

without seeing a demo page with that code, at a first look that behaviour could be due to a javascript error: where you wrote

 promise.done()(function() {
            form.submit();
 }, null);

you should write instead

 promise.done(function() {
     form.submit();
 });

edited Aug 28 '14 at 04:23

answered Apr 26 '12 at 08:54

Fabrizio Calderan

120,726
26
164
177

2

so please check if you have javascript error on the console and post a working demo page – Fabrizio Calderan Apr 26 '12 at 09:01
the line `promise.done()` is throwing a _Uncought TypeError: object is not a function_. I'm not sure why, I've added some debugging alerts in showing `promise.state()` and those are working. – SynackSA Apr 26 '12 at 09:09
Bleh, just figured that error out now, it's should be `promise.done(function() ....` and not `promise.done()(function()....` don't know what I was doing there. – SynackSA Apr 26 '12 at 09:10
your workaround seems really strange to me: your deferred is resolved when ajax executes success method. But maybe I'm missing smthg of your code... – Fabrizio Calderan Apr 26 '12 at 09:26
I set the object to rejected the in the subdomain isn't valid `jqxhr.success(function (data){ if (data.validSubdomain) { $("div#"+$(this).attr('id')+"Info").html(copyItems["info_"+$(this).attr('id')+"Available"]); deferred.resolve(data); } else { $("div#"+$(this).attr('id')+"Info").html(copyItems["err_"+$(this).attr('id')+"Unavailable"]); deferred.reject(jqxhr, 'error'); } })` – SynackSA Apr 26 '12 at 09:59

jQuery validate and deferred objects

1 Answers1