Проверка формы Javascript с помощью оформления Jquery

#javascript #jquery #jquery-selectors #validation

#javascript #jquery #jquery-селекторы #проверка

Вопрос:

Пожалуйста, извините меня за отсутствие приправы к javascript. В настоящее время у меня есть две части моей проверки:
1. функции, которые применяют оформление css к полям ввода и делают видимым div, содержащий сообщение об ошибке
2. функция, которая объединяет вышеуказанные функции и вызывается в форме, например, onSubmit=»(return validate();)»

Я хочу исправить две вещи:

1. Реорганизуйте код, чтобы сделать его меньше

2. ИСПРАВЛЕНО с обновлением кода. Примените оформление текста селектора ко всем пустым полям. В настоящее время оформление применяется к первому пустому полю, затем, как только вводится текстовое значение, оно попадает в следующее поле. Каждое пустое поле должно быть проверено и иметь надлежащее оформление.

 /** VALIDATION DECORATION **/

function validateAccountNameRequired(textInputId, textInputLabelName) {
    var valid = true;

    if (!$('input#accountName').val()) {
        $('input#accountName').addClass('inputError');
        $('ul#accountNameList').find('div.error').attr('style', '');
        valid = false;
    } else if ($('input#accountName').val()) {
        $('input#accountName').removeClass('inputError');
        $('ul#accountNameList').find('div.error').hide();
    }
    return valid;
}

function validateAccountBusOrgIDRequired(textInputId, textInputLabelName) {
    var valid = true;

    if (!$('input#accountBusOrgID').val()) {
        $('input#accountBusOrgID').addClass('inputError');
        $('ul#busOrgList').find('div.error').attr('style', '');
        valid = false;
    } else if ($('input#accountBusOrgID').val()) {
        $('input#accountBusOrgID').removeClass('inputError');
        $('ul#busOrgList').find('div.error').hide();
    }

    return valid;
} /** VALIDATORS **/

function validate() {

        valid = validateAccountNameRequired('accountName', 'Account Name');
        valid1 = validateAccountBusOrgIDRequired('accountBusOrgID', 'Account Bus Org ID');

    return valid amp;amp; valid1;
}

1. Я знаю, что это не ответит на вопрос для вашего текущего решения, но почему бы не подумать о переключении вашей проверки на использование библиотеки jQuery validate? Это намного проще, чем пытаться создать свой собственный, и делает все то, что вы пытаетесь сделать со своим (насколько я могу судить). Если вы все еще предпочитаете использовать свой собственный, дайте мне знать, и я смогу поближе взглянуть на то, что вы делаете, но я настоятельно рекомендую использовать этот плагин: jQuery validation plugin

2. Как указано ниже, вы должны использовать плагин Validator , который уже делает то, что вы хотите, плюс намного больше. Он также включает в себя вызываемый метод .valid() , который устраняет необходимость в вашей переменной «valid flag».

Ответ №1:

Я решил свою собственную проблему. Надеюсь, кто-то еще может извлечь выгоду:

Проверяет все поля одновременно
Переработано для лучшей согласованности, просто загрузите значения в функцию validate() и повторно используйте одну функцию validateTextRequired():

 
    function validateTextRequired( textInputId, errorListId)
        {
            var valid = true;

        if( !$('input'   '#'   textInputId).val())
        {
            $('ul'   '#'   errorListId).find('label').addClass('error');
            $('input'   '#'   textInputId).addClass('inputError');
            $('ul'   '#'   errorListId).find('div.error').attr('style','');
            valid = false;
        } else if ($('input#'   textInputId).val()) {
            $('ul'   '#'   errorListId).find('label').removeClass('error');
            $('input'   '#'   textInputId).removeClass('inputError');
            $('u'   'l#'   errorListId).find('div.error').hide();
        }
        return valid;
    }

           function validate()
           {
        valid = validateTextRequired( 'accountName', 'accountNameList');
        valid1 = validateTextRequired( 'accountBusOrgID', 'busOrgList');
        valid2 = validateTextRequired( 'acctMgr', 'accountMgrList');
            }