Menu icon Foundation
Zurb abide ajax validation

Hi everyone, i need to make some ajax validation in a form. For example i have to check if a email address is already present on my database. Is that possible with Abide?

abidevalidationAJAXserver

Hi everyone, i need to make some ajax validation in a form. For example i have to check if a email address is already present on my database. Is that possible with Abide?

Rafi Benkual almost 6 years ago

You can do it with:
Javascript
$('.email-input').on('valid',function () {
$.post(check_if_exists_url, function (response) {
if (response.email_exists) {
// show error message
}
});
});

You will still need to tie into backend. The response is a json value true or false.

Sven Donner about 5 years ago

Well, I had the same problem and searched a very long time.
The problem on this solution was that if my validator marked this
field as invalid, abide came over and marked it as valid.

Since I fixed some things in abide (removed doubled & tripled validation)
Rafi Benkual's solution is pretty good.

Here my implementation of it:

 (function($) {
        $.fn.markInvalid = function(text) {
            $(this).filter(":input").each(function(i, el) {
                var input = $(el);
                var container = input.closest(".row");    
                var label = container.find(".prefix");    
                var error = container.find("small.error");

                label.attr("role", "alert").addClass("error");
                input.attr("data-invalid", "");
                input.parent().addClass("error");

                if(text)
                    error.text(text);
            });
        };
    })(jQuery)

    $("#reg_username").on("valid", function(e) {
        $.ajax({
            data : {
                action : "validate.username",
                username : $(e.target).val()
            },
            success : function(data) {
                if(!data.success)
                    $(e.target).markInvalid(data.messages.join('<br>'));
            }
        })
    });

I dunno if zurb is merging my requests so here the fix:
https://github.com/inetbusiness/foundation/commit/d5e9dce55c8055cdb88b66baf9f4106d54f4c465