Проверка формы не происходит

Question

В моей форме есть несколько полей, которые являются обязательными, и я пометил их class="required". Я пишу ниже jquery для проверки этой формы, но этого не происходит. Я думаю, что либо я не справляюсь с вызовом двух функций, либо не получаю нужный элемент через $(this).

<script type="text/javascript">
    function validatemyForm() {
        $('.required').each(function() {
            if($(this).val() == "" || $(this).replace(/\s/g, '').length == 0)
            {
                $(this).insertAfter('<span>This is a Required Filed</span>');
                return false;
            }
            else {
                $(this).remove();
            }
        })
        return true;
    }
</script>

Я звоню в форму из обработчика события onsubmit <form id="myform" onsubmit ="return validatemyForm();">. Я неправильно использую each и this jQuery?

Answer 1

Количество вещей:

1. Вы можете использовать replace для String, в то время как вы используете его для объекта jQuery. Там нет $(this).replace. Если вы хотите проверить пробелы, вам нужно значение, то есть $(this).val().replace.

2. Вы используете $(this).insertAfter, что означает, что элемент ввода вставляется после диапазона. $(this).remove просто удаляет элемент ввода, который, как мне кажется, тоже не тот, который вам нужен.

3. Вы return false в each(), но это не возвращает это значение в функции validatemyForm. В этой функции вы всегда return true.

Я изменил это на это, чтобы оно заработало: http://jsfiddle.net/DaDQT/6/.

Answer 2

Ваша функция validatemyForm всегда возвращает true.return false, который у вас есть, находится внутри функции, переданной в each.validatemyForm на этом этапе не останавливается.

Следующее должно работать так, как вы ожидаете (непроверенный код):

<script type="text/javascript">
    function validatemyForm() {
        var ok = true;
        $('.required').each(function() {
            if($(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0)
            {
                $(this).insertAfter('<span>This is a Required Field</span>');
                ok = false;
            }
            else {
                $(this).remove();
            }
        })
        return ok;
    }
</script>