Блог

В моей форме есть некоторые поля, которые являются обязательными, и я пометил их 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?

Ряд вещей:

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

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

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

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

Ваша функция 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>