Проверка формы jQuery перед отправкой Ajax

Бит JavaScript:

$(document).ready(function()
    {
            $('#form').submit(function(e)
            {     

                e.preventDefault();
                var $form = $(this);

                // check if the input is valid
                if(! $form.valid()) return false;
                    $.ajax(
                    {
                    type:'POST',
                    url:'add.php',
                    data:$('#form').serialize(),
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });     

            })
    });

Бит HTML:

    <input type="text" name="answer[1]" class="required" />
    <input type="text" name="answer[2]" class="required" />

Итак, это код, который я пытаюсь использовать. Идея состоит в том, чтобы проверить все мои входные данные, прежде чем я отправлю свою форму с помощью Ajax. Я пробовал множество версий этого сейчас, но каждый раз я заканчиваю отправкой, даже если форма не полностью заполнена. Все мои входы относятся к классу «требуется». Может ли кто-нибудь увидеть, что я делаю неправильно?

Кроме того, я завишу от требований, основанных на классе -, поскольку мои входные имена генерируются с помощью php, поэтому я никогда не могу быть уверен, какое имя [id] или типы ввода я получаю.

Я показываю/скрываю вопросы, когда просматриваю их на «страницах».

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>

Дж.С.:

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }