Простая проверка формы.Объектно-ориентированный

Question

Постановка задачи: Мне необходимо написать код, который перед отправкой формы проверит, заполнены ли все необходимые поля. Если не все поля заполнены, необходимо выделить их красным цветом и не отправлять форму.

Теперь код существует в таком виде:

function formsubmit(formName, reqFieldArr){     
    var curForm = new formObj(formName, reqFieldArr);
    if(curForm.valid)
        curForm.send();
    else
        curForm.paint();    
}


function formObj(formName, reqFieldArr){
    var filledCount = 0;
    var fieldArr = new Array();
    for(i=reqFieldArr.length-1; i>=0; i--){
        fieldArr[i] = new fieldObj(formName, reqFieldArr[i]);
        if(fieldArr[i].filled == true)
        filledCount++;
    }

    if(filledCount == fieldArr.length)
        this.valid = true;
    else
        this.valid = false;


    this.paint = function(){
        for(i=fieldArr.length-1; i>=0; i--){
            if(fieldArr[i].filled == false)
                fieldArr[i].paintInRed();
            else
                fieldArr[i].unPaintInRed();
        }
    }

    this.send = function(){
        document.forms[formName].submit();
    }
}


function fieldObj(formName, fName){
    var curField = document.forms[formName].elements[fName];

    if(curField.value != '')
        this.filled = true;
    else
        this.filled = false;

    this.paintInRed = function(){
        curField.addClassName('red');
    }

    this.unPaintInRed = function(){
        curField.removeClassName('red');
    }
}

Функция вызывается таким образом:

<input type="button" onClick="formsubmit('orderform', ['name', 'post', 'payer', 'recipient', 'good'])"  value="send" />

Теперь код работает. Но я бы хотел добавить в него « динамизм ».

Что мне необходимо: сохранить исходный код принципиально, добавить поля прослушивания формы (только необходимые для заполнения).

Например, когда поле выделено красным цветом и пользователь начинает его заполнять, оно должно стать белым.

На самом деле мне нужно добавить прослушивание событий: onChange, blur для пустых полей формы. Как это сделать в рамках исходного кода.

Если весь мой код - полная чушь, дайте мне знать об этом. Как мне это изменить используя объектно-ориентированный подход.

---

Дайте мне чистое решение javascript, пожалуйста. Jquery - отличная библиотека, но она не подходит для меня.

Answer 1

сделал.

function formsubmit(formName, reqFieldArr){     
    var curForm = new formObj(formName, reqFieldArr);
    if(curForm.valid)
        curForm.send();
    else{
        curForm.paint();    
        curForm.listen();
    }
}


function formObj(formName, reqFieldArr){
    var filledCount = 0;
    var fieldArr = new Array();
    for(i=reqFieldArr.length-1; i>=0; i--){
        fieldArr[i] = new fieldObj(formName, reqFieldArr[i]);
        if(fieldArr[i].filled == true)
        filledCount++;
    }

    if(filledCount == fieldArr.length)
        this.valid = true;
    else
        this.valid = false;


    this.paint = function(){
        for(i=fieldArr.length-1; i>=0; i--){
            if(fieldArr[i].filled == false)
                fieldArr[i].paintInRed();
            else
                fieldArr[i].unPaintInRed();
        }
    }

    this.send = function(){
        document.forms[formName].submit();
    }

    this.listen = function(){
        for(i=fieldArr.length-1; i>=0; i--){
            fieldArr[i].fieldListen();
        }
    }
}

function fieldObj(formName, fName){
    var curField = document.forms[formName].elements[fName];

    this.filled = getValueBool();

    this.paintInRed = function(){
        curField.addClassName('red');
    }

    this.unPaintInRed = function(){
        curField.removeClassName('red');
    }

    this.fieldListen = function(){
        curField.onkeyup = function(){
            if(curField.value != ''){ 
                curField.removeClassName('red');
            }
            else{
                curField.addClassName('red');
            }
        }
    }

    function getValueBool(){
        if(curField.value != '')
            return true;
        else
            return false;
    }
}

Этот код мне не нравится, но он работает, и я не смог улучшить его, не переписав полностью.

Answer 2

Чтобы сохранить ваш HTML в чистоте, я предлагаю немного другую стратегию.

1. Используйте фреймворк, такой как jQuery, который делает многое намного проще.

2. Переместить весь код во внешний скрипт.

3. Используйте событие body.onLoad для поиска всех форм и установки проверочного кода.

4. Вместо жесткого кодирования значений полей добавьте класс css в каждое обязательное поле:

   <input type="text" ... class="textField required" ...>
   

   Обратите внимание, что вы можете иметь более одного класса.

Когда форма отправлена, проверьте все поля и убедитесь, что все с классом required не пусты. Если они пусты, добавьте класс error, в противном случае удалите этот класс. Также подумайте о том, чтобы добавить всплывающую подсказку с надписью «Поле обязательно для заполнения» или, что еще лучше, добавить этот текст рядом с полем, чтобы пользователь мог одним взглядом увидеть, что не так.

В таблице стилей CSS вы можете определить правило отображения ошибок.

Для остальной части функциональности проверьте документы jQuery о событиях формы .

Answer 3

jQuery добавляет много преимуществ для низких накладных расходов. У этого есть плагин проверки, который очень популярен. Также есть несколько альтернатив, но я считаю, что jQuery - лучший.

Преимущества

• маленький размер загружаемого файла
• встроенная поддержка кросс-браузеров
• сообщество ярких плагинов
• улучшенная производительность
• улучшено взаимодействие с пользователем