HTML+CSS+JavaScript

Привет всем

Хочу чтобы при нажатия на кнопку проверила не пусто ли поля. Если не пусто то отправлял форму. Но почемуто отправляет пустую форму.
У кого небуд есть какие нибуд идеи как решит эту задачу?

<script>     $(document).ready(function(){         function valid_data(val1,val2){             val1.blur(function(){                 if($(this).val() == ''){                     $(this).addClass('border');                     val2.text('* Required');                     return false;                 }             });                          val1.keypress(function(){                 if($(this).val() != ''){                     $(this).removeClass('border');                     val2.text('');                     return true;                 }             });         }                  var name, lname, age, mobile;         name     = valid_data($('#name'),$('.name'));         lname    = valid_data($('#lname'),$('.lname'));         age        = valid_data($('#age'),$('.age'));         mobile    = valid_data($('#mobile'),$('.mobile'));             }); </script> <form action="file.php" method="post">     <p>         <label for="name">Name:</label><br>         <input type="text" id="name"><br>         <span class="empty_fild name"></span>     </p>     <p>         <label for="lname">Last name:</label><br>         <input type="text" id="lname"><br>         <span class="empty_fild lname"></span>     </p>     <p>         <label for="age">Age:</label><br>         <input type="text" id="age"><br>         <span class="empty_fild age"></span>     </p>     <p>         <label for="mobile">Mobile:</label><br>         <input type="text" id="mobile"><br>         <span class="empty_fild mobile"></span>     </p>     <p>         <button type="submit" onClick="valid_data()">Send</button>     </p> </form>

Потому, что вы затеваете проверку полей формы сразу при загрузке страницы не понятно для чего. При этом саму функцию проверки в обработчик события onload страницы помещать совсем не нужно.
button type="submit" onClick="valid_data()" - это выбросить (это и есть причина), и form onsubmit="return valid_data(this)" в таком случае. Но сама функция проверки, даже слов нет описать, чего вы там такое делаете.

>Но сама функция проверки, даже слов нет описать
Конечно существует различные скрипты котоый проверяет форму но я хочу чтобы сам папробовал написат.

>чего вы там такое делаете.
Вы хотите сказат что неправилно думаю?
если "да" то ссылку, кинигу или совет куда копатся.
Я только начинаю изучать JavaScript. Если ктото не заняеть что то и ему за это стыдно. То я незаню JavaScript, доже русский язык мне не радной.

Еще я не говорю решите мне эту задачу!

Нет, почему же, я так не говорю. Думаете вы правильно (не всегда только), а вот мыслите не цельно. )

Хотите изучать JS, значит изучайте каждое событие, когда возникает и что оно делает. Вот например, кнопка submit отправляет форму, и ей ваше наставление onClick="valid_data()" как-то побоку.

Объявлять функции по onload нет смысла, не считая функций, например, устанавливающих обработчик. В этом событии объявляются методы и функции требующие доступ к элементам на странице (установка обработчика, правка стиля, инициализация и т.п.), так как на момент загрузки страницы элемента просто еще нет в документе, и обращение к нему вызовет ошибку.

Как проверять форму? Можно и по потере фокуса, но нужно объявить обработчик $('elements').blur()... который у вас зачем то спрятан в функцию, которая проверяет форму при отправке. Вот логику этого действа вы можете описать? Я ее не понимаю.

А можно (и нужно) проверять форму при ее отправке (по событию onsubmit, .submit() в jQ), проходом по всем ее элементам, и если элемент обязателен и пуст, значит вывод ошибки. При этом, если <span class="empty_fild age"></span> служит для вывода ошибки, то можно и класс ему не прописывать, а стили объявлять через форму родителя. Обращаться к нему чтобы поместить в него ошибку можно по иерархии, от текущего элемента формы.

А объявленный метод обработки события .blur() элементов формы должен ссылаться на метод проверки формы, для это в jQ есть триггер.

Метод проверки формы должен возвращать true/false в зависимости от результата проверки.

Спасибо =)