Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Проверка на заполненость формы (не такая как все)

Автор: vintyara 11.7.2007, 15:36

Итак - на форуме множестов вопросов и ответов на них - как сделать проверку заполнености формы. В случае ошибки во всех вариантах используются попап мессаги - мол вы не ввели емаил, давайти вводите, и будет вам счастье. Мне же такой вариант не нравится. Старо и некрасиво smile

Затея следующая. Например имеем такой хтмл код -

Код


<form action="" method="post">

<style>
    td.red {
        background-color: red;
    }
</style>

...
    <table>
    
        <tr>
            <td class="red">Name : </td>
            <td><input type="text" /></td>
        </tr>
        
        <tr>
            <td>Фомилийа :</td>
            <td><input type="text" /></td>
        </tr>
    
    </table>
    <input type="submit" />
...

В первой строке в первой колонке видим класс red. Так вот - хотелось бы как-то задавать поля, которые пользователь должен обязательно заполнить (так как будут ещё не обязательное поля для заполнения) и, чтобы после давления юзером сабмита, при проверке и
при обнаружении незаполненого поля (если оно обязательное к заполнению) к нашему td добавлялся этот самый class="red".
Т.е. чтобы юзер визуально увидел красные поля и понял что те инпуты нада заполнить.

Подскажите как сие реализовать. Можно с примерчиками (ибо ЖС только учу).

Автор: Sultanische 11.7.2007, 16:15

посмотри код до РНРинвизибл боард кажеться там при регистрации такое зделано сразу )))
и не только в РНРинфизбоарде такое.. уже кажеться на многих сайтах сразу и пароль проверяют и тд )

я не шарю ЖС тоже токо начал) но поищи там где говорил)

Автор: vintyara 11.7.2007, 16:20

Sultanische, гм.. в чёт ты прав. посмотрю.

Цитата(Sultanische @ 11.7.2007, 16:15

)

уже кажеться на многих сайтах сразу и пароль проверяют и тд )

это AJAX

это нас тут ниитирисует smile

Автор: Sultanische 11.7.2007, 16:35

не я не за аджакс))) я о проверках на защищоснность пароля )))) кажеться такое используеться на яндекс паспорте

Автор: smartov 11.7.2007, 18:38

vintyara,

В данном случае автора должны интересовать два вопроса
1) Где писать условие валидности поля - это самый главный вопрос. Каким образом определять что валидно для данного input: только цифры, буквы латиныци, e-mail.... Придумай куда впихивать эту информацию и останутся сущие мелочи

2) Связка инпута и определенного td. То есть должен присутствовать какой-то параметр, по которому яваскрипт при проверке мог точно узнать какой именно td подсвечивать красным.

И самое главное чтобы в итоге все это (условия и связки) было удобно и ненапряжно писать.

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

Автор: check 11.7.2007, 20:18

Что-то в таком духе

Код


<style>
    td.red {
        background-color: red;
    }
</style>
<script>
function validateForm() { 
   form = document.forms[0]; 
   if (form.fname.value.length == 0) {
     document.getElementById('name').className = 'red';
     return false;
   }
   else return true;
}
</script>
<form onSubmit='return validateForm()' action="" method="post">
    <table>
    
        <tr>
            <td id="name">Name : </td>
            <td><input name="fname" type="text" /></td>
        </tr>
        
        <tr>
            <td id="fam">Фомилийа :</td>
            <td><input name="lname" type="text" /></td>
        </tr>
    
    </table>
    <input type="submit" />
</form>

Добавлено через 1 минуту и 17 секунд
Это я проверил поле для ввода имени на пустоту.

Автор: smartov 12.7.2007, 09:10

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

p.s. кроме того вот это неверно

Код


if (form.fname.value.length == 0) {

а я введу в поле три пробела,.

Автор: check 12.7.2007, 10:18

Цитата(smartov @ 12.7.2007, 09:10

)

а я введу в поле три пробела

Согласен, значит пишем функцию trim(), либо выбираем из уже существующих реализаций.
Например так

Код


if ('undefined' == typeof String.prototype.trim) {
  String.prototype.trim = function() {
    return this.replace(/^\s+/, '').replace(/\s+$/, '');
  }
}

function validateForm() { 
   form = document.forms[0]; 
   if (form.fname.value.trim().length == 0) {
     document.getElementById('name').className = 'red';
     return false;
   }
   else return true;
}

Кстати, очень странно что в JS нет стандартного метода trim...

Цитата(smartov @ 12.7.2007, 09:10

)

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

Мне показалось, что у автора вопрос собственно в том как добавить класс CSS к элементу. Но естественно не откажусь посмотреть на более красивые варианты...

Автор: SamDark 12.7.2007, 14:19

Можно так разметить:

Код


<input name="user_name" class="validate-required"/>
<input name="user_e-mail" class="validate-required validate-email"/>