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

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

استفاده از اعتبارسنجی های ساده 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 و اعمال تغییرات ، نتیجه به صورت زیر خواهد بود.

آموزش بوت استرپ

فایل های ضمیمه
دانلود نسخه ی PDF این مطلب