0

Im making custom formular and for one field I need a username ajax validation.

I prepared a custom handler in jQuery:

document.formvalidator.setHandler('usernamecheck', function(value) {
    jQuery(".username_message").html('');
    jQuery(".username_message").hide();

    jQuery.ajax({
        url:'index.php?option=com_xxx&task=user.checkUserName',
        type: "POST",
        data: {
            'username': value
        }
    }).done(function(msg) {
        console.log(msg);
        msg = JSON.parse(msg);

        if (msg.msg==='false')
        {
            jQuery(".username_message").show();
            jQuery(".username_message").html(msg.html);
            return false;                
        }
        else
        {
            return true;    
        }

    })
});

Ajax works fine but while form validation this handler always add invalid class to my field.

Even if all method returns true, after validation I have red bordered input. But when I remove ajax calling from this method and for testing check only by if-else, it works ok.

Anyone knows why? Maybe it can't be done by ajax in handlers?

  • Can you post the XML form definition for the field in question? My guess is you need to add the class validate-usernamecheck. Also, did you add the appropriate class to the form and load the courts validation plugin using JHtml::_('behavior.formvalidation'); – Brian Bolli Dec 9 '15 at 1:53
  • Hi Brian, JHtml::_('behavior.formvalidation'); was added as well as class in xml form: <field name="autor" type="text" class="input" label="COM_XXX_FORM_LBL_ITEM_AUTOR" description="COM_XXX_FORM_DESC_ITEM_AUTOR" required="true" hint="COM_XXX_CONTACT_NAME" /> – Tomasz Omeljaniuk Aug 1 '16 at 9:41
1

I managed to run this validation by small work around. I moved ajax request to input blur method and in form validation hendler I just check some variables which was set after ajax request:

jQuery(document).ready(function() {

    jQuery("#jform_email").blur(function(){
        email = jQuery("#" + this.id).val();
        jQuery(".email_message").html('');
        jQuery(".email_message").hide();
        jQuery("#jform_email").removeClass('invalid');
        usermailvalid = true;

        jQuery.ajax({
            url:'index.php?option=com_xxx&task=user.checkUserEmail',
            type: "POST",
            data: {
                'email': email
            }
        }).done(function(msg) {
            console.log(msg);
            msg = JSON.parse(msg);

            if (msg.msg==='false')
            {
                usermailvalid = false;
                jQuery("#jform_email").addClass('invalid');
                jQuery(".email_message").show();
                jQuery(".email_message").html(msg.html);                
            }

        })
    });

    var usermailvalid = true;

    document.formvalidator.setHandler('usermailcheck', function(value) {

        if (usermailvalid==false)
        {
            return false;                
        }
        else
        {
            return true;    
        }

    });
});

Hope it helps someone.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.