Валидация формы на JS

[Novice]

Валидация формы на JS

прошу извинить за оффтоп

При заполнении формы нужен функционал который не позволит нажать на сабмит (энтер)
пока не заполнены все (несколько определенных) полей формы.

Пока кроме как прописывать у каждого поля onkeyup="validate_form()"

и написания ф-и типа:

<script>
function validate_form() 
{
    form = document.getElementById("card_form")
    var bad = false;
    for(var i=0; i < form.elements.length; i++)
    {
        if(form.elements[i].value == "")
        {
            bad = true;
        }
    }
    form.elements["test"].disabled = bad
    
}
</script>

где кнопка сабмита <input type="submit" name="test" value="Отправить" disabled>

ни к чему другому додуматься не могу.

Есть ли более универсальнее/удобнее средство?

 

[sage]

не позволит нажать на сабмит

не забывай, что я могу отправить POST запрос, даже не заходя на твой сайт, поэтому одной клиентской проверки (JavaScript) недостаточно, нужна ещё и проверка на сервере (PHP). А для чего тебе скрывать кнопочку submit? Если не введены данные в обязательные поля, стартуй сессию, записывай в неё поля формы и ошибки->локэйшн->удаляем сессию->выводим заполненную форму с сообщениями об ошибках.

 

[Novice]

Да, абсолютно с тобой согласен.
Проверка на сервере присутствует, про отправку данных без клиента(броузера) я тоже знаю....
Просто вредный босс хочет и все, а переубедить напряжно.

 

[sage]

в <form .... onsubmit="return validate_form()">
а в ф-ии validate_form(), если bad true, делаешь return false, иначе return true. При return false сабмит формы происходить не будет

 

[kruglov]

<form .... onsubmit=" return validate_form()">

 

[Novice]

Короче я понял, так и буду делать ))

onsubmit=" return validate_form()"
так я делал всю жизнь, имелось ввиду именно этот долбанный эффект неактивной кнопки.

 

[HEm]

сделай массив элементов (true|false), соответствующий полям формы, на OnChange каждого поля поставь запись в соотв. элемент массива true если поле не пустое и false если пустое, а также проверку логического умножение всех элементов массива, если дает true то сабмит можно энаблить

 

[Novice]

Автор оригинала: HEm
сделай массив элементов (true|false)...

да, как вариант

В принципе onkeyup меня тоже устраивает, тока сомнения как оно будет себя вести на больших формах.

ЗЫ: Onchange не возникает при вводе текста в поле, кажеться только при onBlur

ЗЗЫ: вобще-то изначально я многого хотел, надеялся что есть чтото типа <form onchange="validate(['name', 'email', 'address'])">

 

[HEm]

а вообще обычно в таких случаях сабмит энаблят после нажатия чекбокса, у которого написано "да, я все прочитал и согласен"