استفاده از اعتبارسنجی های ساده jQuery همراه با Bootstrap

در این مقاله قصد داریم نشان دهیم چگونه می توان از اعتبارسنجی های Bootstrap به همراه اعتبارسنجی های jQuery استفاده کرد و Validation های پیش فرض jQuery را تغییر داد. برای این منظور مثالی را ارائه خواهیم داد.

به دلیل آنکه معمولا از Bootstrap به عنوان رابط گرافیکی استفاده میکنیم، می توان برای یکپارچه سازی Validation های jQuery و Bootstrap از روش زیر استفاده کنیم.

در اینجا یک نمونه از اعتبارسنجی های Bootstrap را مشاهده میکنید :

یک کتابخانه JavaScript برای تغییر سبک اعتبارسنج های jQuery ایجاد میکنیم. در قسمت پایین کدهای این کتابخانه را با نام jquery.validate.unobtrusive.bootstrap.js مشاهده میکنید.

(function ($) {
    var classes = { groupIdentifier: '.form-group', 
    error: 'has-error', success: 'has-success', feedback: 'has-feedback' };
    function updateClasses(inputElement, toAdd, toRemove, addFeedback) {
        var group = inputElement.closest(classes.groupIdentifier);
        if (group.length > 0) {
            group.addClass(toAdd).removeClass(toRemove);
            if (addFeedback) {
                group.addClass(classes.feedback);
            }
        }
    }

    function onError(inputElement, message) {
        var group = inputElement.closest(classes.groupIdentifier);
        var inputGroup = inputElement.closest('.input-group');
        var helpBlock = '<span class="help-block">' + message + '</span>';

        group.find('.form-control-feedback').remove();
        if (group.find('.help-block').length > 0) {
            group.find('.help-block').text(message);
        } else {
            if (inputGroup.length > 0) {
                inputGroup.after(helpBlock);
            } else {
                inputElement.after(helpBlock);
            }
        }

        if (inputElement.context.type === 'text') {
            var errorIcon = '<span class="glyphicon glyphicon-remove 
            form-control-feedback" aria-hidden="true"></span>';
            if (inputGroup.length > 0) {
                inputGroup.after(errorIcon);
            } else {
                inputElement.after(errorIcon);
            }
            updateClasses(inputElement, classes.error, classes.success, true);
        } else {
            updateClasses(inputElement, classes.error, classes.success, false);
        }
    }

    function onSuccess(inputElement) {
        var group = inputElement.closest(classes.groupIdentifier);
        var inputGroup = inputElement.closest('.input-group');

        group.find('.form-control-feedback').remove();
        group.find('.help-block').remove();
        if (inputElement.context.type === 'text') {
            var successIcon = '<span class="glyphicon glyphicon-ok 
            form-control-feedback" aria-hidden="true"></span>';
            if (inputGroup.length > 0) {
                inputGroup.after(successIcon);
            } else {
                inputElement.after(successIcon);
            }
            updateClasses(inputElement, classes.success, classes.error, true);
        } else {
            updateClasses(inputElement, classes.success, classes.error, false);
        }
    }

    function onValidated(errorMap, errorList) {
        $.each(errorList, function () {
            onError($(this.element), this.message);
        });

        if (this.settings.success) {
            $.each(this.successList, function () {
                onSuccess($(this));
            });
        }
    }

    $(function () {
        $('form').each(function () {
            var validator = $(this).data('validator');
            validator.settings.showErrors = onValidated;
        });
    });
}(jQuery));

تغییرات مهمی لازم است که در توابع updateClasses ، onError و onSuccess باید ایجاد شود.

برای تابع updateClasses یک پارامتر دیگر با نام addFeedback اضافه میکنیم. نماینده کلاس has-feedback درBootstrap است که در form-group به آن نیاز است و شامل یک عنصر ورودی از نوع text است . این کلاس به ما اجازه می دهد تا آیکون های کوچکی را در گوشه فیلد ورودی اضافه کنیم.

function updateClasses(inputElement, toAdd, toRemove, addFeedback) {
    var group = inputElement.closest(classes.groupIdentifier);
    if (group.length > 0) {
        group.addClass(toAdd).removeClass(toRemove);
        if (addFeedback) {
            group.addClass(classes.feedback);
        }
    }
}

تابع onError ، در جایی که یک span با کلاس help-block ایجاد کردیم ، شامل errorMessage می شود که به کاربر خطایی را که در فیلد ایجاد خواهد شد نمایش می دهد. همچنین چک میکنیم که عنصر ورودی درون input Group وجود دارد و اگر باشد، help block را پس از input group اضافه میکنیم. درغیر اینصورت اگر بعد از عنصر ورودی درون input group اضافه شده باشد ، باعث بروز add-on در input group برای کشیده شدن فیلد ورودی می شود .

برای دریافت علامت X در عنصر ورودی ، باید مطمئن شویم که عنصر ورودی ، text است. بعد از آن که از text بودن ورودی مطمئن شدیم یک span شامل آیکون X بعد از عنصر ورودی قرار می دهیم.

function onError(inputElement, message) {
    var group = inputElement.closest(classes.groupIdentifier);
    var inputGroup = inputElement.closest('.input-group');
    var helpBlock = '<span class="help-block">' +
            message + '</span>';

    group.find('.form-control-feedback').remove(); //remove old icon span
    if (group.find('.help-block').length > 0) {
        group.find('.help-block').text(message);
    } else {
        if (inputGroup.length > 0) {
            inputGroup.after(helpBlock);
        } else {
            inputElement.after(helpBlock);
        }
    }

    if (inputElement.context.type === 'text') {
        // add new icon to text input
        var errorIcon = '<span class="glyphicon
        glyphicon-remove form-control-feedback" aria-hidden="true"></span>';
        if (inputGroup.length > 0) {
            inputGroup.after(errorIcon);
        } else {
            inputElement.after(errorIcon);
        }
        updateClasses(inputElement, classes.error, classes.success, true);
    } else {
        updateClasses(inputElement, classes.error, classes.success, false);
    }
}

همانند تابع onError ، تابع onSuccess آیکونی به ورودی اضافه میکند و چک میکند چه زمانی کلاس has-feedback به form-group اضافه شده است. تفاوت اصلی این است که اگر فیلد در وضعیت موفقیت آمیزی بود پیام help-block حذف شود .

function onSuccess(inputElement) {
    var group = inputElement.closest(classes.groupIdentifier);
    var inputGroup = inputElement.closest('.input-group');

    group.find('.form-control-feedback').remove(); //remove old icon span
    group.find('.help-block').remove();
    if (inputElement.context.type === 'text') {
        // add new icon to text input
        var successIcon = '<span class="glyphicon
        glyphicon-ok form-control-feedback" aria-hidden="true"></span>';
        if (inputGroup.length > 0) {
            inputGroup.after(successIcon);
        } else {
            inputElement.after(successIcon);
        }
        updateClasses(inputElement, classes.success, classes.error, true);
    } else {
        updateClasses(inputElement, classes.success, classes.error, false);
    }
}

بعد از اضافه کردن کتابخانه JavaScript و اعمال تغییرات ، نتیجه به صورت زیر خواهد بود.