смешанные Аякс/форма на JavaScript проверку


У меня есть форма, на которой "отправить" кнопка должна быть доступна только, после каждого поля проверяемой форме. Для большинства моих проверяем, я называю функцию checkFormValue() , который является функцией сбора всех простых проверок, дать предупреждение, где проверить не удалось, а если хотя бы одной из проверить не получится, отключать кнопку. Вызова принимаются на размытие событие для каждого поля формы.

function checkFormValue(){
    var form = document.myform;

    //initializing a few variable with check, amongst them the following
    //Those are example of check which are pure javascript function
    var checkIDField = checkField(form.myids) && checkIDs();
        //...

    //This is an example of AJAX function
    if(checkIDField){
        checkIDValidity();
    }

    //Checks variables are gathered under one variable
    var validform = checkIDField && CheckContactField && CheckPathsField;

    var warnings = document.getElementsByClassName('warning');
    var i;
    var count = 0;

    //Loop to check the number of warnings
    for (i = 0; i < warnings.length; i++){   
        // Check that current character is number.
        if(warnings[i].style.display===""){
            count++    
        }
    }
    validform = validform && (count === 0);
    document.form.send.disabled = !(validform);
}

Несколько проверку надо делать на сервере (SELECT запрос, проверьте, если существует какой-либо файл и т. д.). Для тех, проверить,, я делаю AJAX-вызовы, и я добавил в checkFormValue() цикл, который посчитать количество предупреждение отображается. Если никто не появится, то кнопку не отключить больше.

Один из моих полей должно содержать идентификатор, в виде списка, разделенного пробелами. Удостоверившись в том, что список правильно отформатирован (список целых чисел, разделенных пробелом, не дубликат), я хочу увидеть, если эти идентификаторы хранятся в базе данных. Следующие функции AJAX-вызов:

function checkIDValidity(){
    var xmlhttp;
    if (window.XMLHttpRequest){ 
        //code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
    }else{ 
        // code for IE6, IE5 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
    }
    xmlhttp.onreadystatechange=function(){ 
        if (xmlhttp.readyState===4 && xmlhttp.status===200){ 
            var existingIDs = xmlhttp.responseText;
            var idcomponent = document.myform.myids;
            var idwarningdiv = document.getElementById('nonexistingid');
            if(existingIDs==="Existing"){
                idcomponent.setAttribute('class', 'valid');
                if(idwarningdiv.style.display !== 'none'){
                    idwarningdiv.style.display='none';
                    idwarningdiv.innerHTML='';
                }
            }else{
                idcomponent.setAttribute('class', 'invalid');
                if(idwarningdiv.style.display !== ''){
                    idwarningdiv.style.display='';
                }
                if(idwarningdiv.innerHTML.substr(51,existingIDs.length)!==existingIDs){
                    idwarningdiv.innerHTML='<br /><img src="img/warning2.png" alt="Warning!" />'+existingIDs+' is not an existing id.';
                }
            } 
        } 
    };
    var idnumbers = document.myform.myids.value;
    var d=new Date();
    //d.toUTCString() is used so the result never get cached
    xmlhttp.open('GET', 'checkidvalidity.php?id='+idnumbers+'&rand='+d.toUTCString(), true); 
    xmlhttp.send();
}

Когда я введите идентификатор, который не существует в базе данных, я получил предупреждение, и если id действителен, предупреждение исчезнет. Но статус включить/отключить кнопку "Отправить" обновляется не сразу, наоборот, я должен нажать два раза на другие поля в форме, прежде чем я смогу увидеть какие-либо изменения на кнопку.

Добавление слушателя на предупреждение div для несуществующих кодов, вызвав на PropertyChanged, как событие и называя checkFormValue сделал в первый фокус, но событие поддерживается только в IE, и как таковой он не работает на другой браузер. С помощью мутационного события "DOMAttrModified" , когда ее поддержали, помогли для Firefox и Opera.

function formLink(objectid){
    var xmlhttp;
    if (window.XMLHttpRequest){ 
        //code for IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest(); 
    }else{ 
        // code for IE6, IE5 
        xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); 
    }
    xmlhttp.onreadystatechange=function(){ 
        if (xmlhttp.readyState===4 && xmlhttp.status===200){ 
            document.getElementById('terminal').innerHTML=xmlhttp.responseText;
            if(isDOMAttrModifiedSupported()){
                document.getElementById("nonexistingid").addEventListener("DOMAttrModified",
                  checkFormValue,
                  false);
            }
            checkFormValue(); 
        } 
    };
    xmlhttp.open('GET', 'myform.php?id='+objectid, true); 
    xmlhttp.send(); 
}

Подробные сведения о isDomAttrModifiedSupported функции вы можете найти в этом посте о том, как определить, если событие DomAttrModified слушателя поддерживается.

Но, используя этот подход оставляет меня с решения не на основе webkit браузерах (Хром, сафари). Есть ли способ, чтобы выполнить рефакторинг мой код так что я могу сделать мой AJAX-вызов, и это может привести на обновление статуса инвалида кнопку "Отправить", без дисконтирования результат моих других простых проверок? Другими словами, мой подход к проверке правильности?

ЗЫ: я получаю какие-то ограничения на этот проект, и я не могу использовать jQuery.



822
2
задан 12 сентября 2011 в 12:09 Источник Поделиться
Комментарии
1 ответ

Я хотел подойти к ней немного differntly.

Есть функции, чтобы изменить, когда поле был проверен или нет:

function checkFormValues(){

var invalidFields = 0;

function updateValidFields(isValidField)
{

invalidFields += isValidField ? -1 : 1;
if(!invalidFields)
{
// Enable Submit Button
// ???
// Profit
}
else
{
// Disable submit Button
// Fail!
}
}

// etc
}

тогда ваши функции проверки выглядеть примерно так:

function validateMe()
{
//Always assume invalid to startwith
updateValidFields(false);

// do awesome field checking.

if(thisFieldIsValid)
{
updateValidFields(true);
}
}

тогда ваша функция checkValidID будет выглядеть так:

function checkIDValidity(){
updateValidFields(false);

и функция изменения в зависимости:

xmlhttp.onreadystatechange=function(){ 
if (xmlhttp.readyState===4 && xmlhttp.status===200){
var existingIDs = xmlhttp.responseText;
var idcomponent = document.myform.myids;
var idwarningdiv = document.getElementById('nonexistingid');
if(existingIDs==="Existing"){
// Do valid stuff
updateValidFields(true);
}else{
//do invalid stuff.
}
}
};

2
ответ дан 13 сентября 2011 в 02:09 Источник Поделиться