проверки Javascript формы, ONBLUR проверки и представления

Question

Я пишу базовый сценарий проверки формы, в основном, как мы идем через форму каждое поле проверяется ONBLUR как этот

  <p> 
       <label>Full Name *</label> 
       <input type="text" id="fullName" value="" onblur="validate('FullName', 'fullName');" /> 
       <span class="formHint" id="hintFullName">Enter your full name</span> 
       <span id="errorFullName"></span> 
       <span class="success" id="successFullName"><img src="images/tick.png" /></span> 
      </p> 

Это все работает отлично, вызывая функцию Validate, которая Я сделал так, чтобы вы могли передать ему имя поля, и оно просто проверит, было ли введено и т. Д. Все в порядке. Ниже приведена функция проверки.

function validate(field) { 


    // Get the value of the input field being submitted 
    value = document.getElementById(field).value; 

    // Set the error field tag in the html 
    errorField = 'error' + field; 

    // Set the success field 
    successField = 'success' + field; 

    if (value != '') { 
     document.getElementById(successField).style.display = 'block'; 
     document.getElementById(errorField).style.display = 'none'; 
    } else { 
     document.getElementById(successField).style.display = 'none'; 
     document.getElementById(errorField).style.display = 'block'; 
    } 
} 

Теперь мой вопрос, после проверки на лету с помощью ONBLUR, что это лучший способ для меня, чтобы продолжить при подаче? Нужно ли мне писать другую функцию, чтобы вручную проверять все поля формы или есть лучший способ.

Я размышлял об этом некоторое время, но я не могу подумать, что лучший способ проверить один раз.

Извините, если какое-либо из этих вопросов не имеет смысла, я смущаюсь уже несколько часов.

Большое спасибо заранее.

Answer 1

Ах, валидация!

Да, вам нужно будет вручную проверить. Как «вручную» будет отличаться. Это может быть прямой, грубой ручной, как это:

function handleOnSubmit(e) { 
    validate('FullName'); 
    validate('ZipCode'); 
    validate('City'); 

    // Loop through all error fields and see if any are present 
} 

не очень эффективным, как вы знаете ...

Вместо этого давайте напишем цикл, который делает это!

Но до этого я бы рекомендовал обновить функцию validate, чтобы вернуть true/false, если ошибка есть/нет.

Что-то вроде:

if (value != '') { 
    document.getElementById(successField).style.display = 'block'; 
    document.getElementById(errorField).style.display = 'none'; 
    return true; 
} else { 
    document.getElementById(successField).style.display = 'none'; 
    document.getElementById(errorField).style.display = 'block'; 
    return false; 
} 

Хорошо!

Теперь мы можем создать родительский валидатор, который может вызывать функцию validate со всеми элементами формы.

Что-то вроде:

function handleOnSubmit(e) { 
    // Query your elements some how 
    var inputs = document.forms[0].getElementsByTagName('input'); 

    // Loop your elements 
    for (i = 0, len = inputs.length; i < len; i++) { 
     if(validate(inputs[i].id) === false) { 
      // Error occurred - we'll prevent the form submission 
      e.preventDefault(); 
     } 
    } 
} 

Вот JSFiddle для демо: http://jsfiddle.net/ww2grozz/

Другой способ (если вы предпочитаете снова не работает, то мультипликатор проверки на уже проверенных элементов) должен поддерживать состояние " проверенных "объектов. Тогда вы можете проверить их.

Что-то вроде этого:

var validated = {}; 

function validate(field) { 
    // Existing logic 

    if (value != '') { 
     validated[field] = true; 
    } else { 
     validated[field] = false; 
    } 
} 

Затем, возвращаясь к выше родительского валидатора:

function handleOnSubmit(e) { 
    // Query your elements 
    var inputs = document.forms[0].getElementsByTagName('input'); 

    // Loop your elements 
    for (i = 0, len = inputs.length; i < len; i++) { 
     var name = inputs[i].id; 

     if (!validated[name]) { 
      // Prevents submission 
      e.preventDefault(); 

      // Call validate 
      validate(name); 
     } 
    } 
} 

Вторая скрипка: http://jsfiddle.net/ww2grozz/2/

Наконец, если это происходит на сервере ... не забудьте проверить на стороне сервера!