Проверка HTML5 с помощью jQuery?

Question

У меня есть большая форма регистрации, которую я разделил с циклом jquery, так что вы видите только мелкие детали, а когда вы нажимаете «Далее», это просто еще один «слайд».

Я хотел бы запустить проверку HTML5 в полях ввода, но я не могу использовать кнопку отправки каждый «слайд», я отправляю ее только один раз в конце. Есть ли способ проверки ввода на основе кнопки ввода, и когда все в порядке, он просто переходит к следующему слайду. Когда есть пустое поле, оно должно срабатывать, а не скользить вперед. Любая помощь?

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

<div id="modules">

    <div id="module_0">
        <p><input type="text" id="fname" name="fname" placeholder="Enter your first name" required /></p>
        <p><input type="text" id="lname" name="lname" placeholder="Enter your last name" required /></p>
        <p><input type="email" id="email" name="email" placeholder="Enter your e-mail" required /></p>
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_1">Academic
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_2">Professional
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
    </div>

    <div id="module_3">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p><input type="text" id="test" placeholder="TEST" /></p>
        <p><input type="button" class="prv" value="Back.."/><input type="button" class="nxt" value="Next.."/></p>
        <p><input type="submit" id="submit" name="submit" value="Send message"/></p>    </div>          
    </div>

</form>

Answer 1

Вы можете использовать метод checkValidity() формы:

Возвращает true, если все элементы управления, которые подлежат проверке ограничения, удовлетворяют их ограничениям, или false, если некоторые элементы управленияне удовлетворяют их ограничения.Вызывает событие с именем invalid на любом элементе управления, который не удовлетворяет его ограничениям;такие элементы управления считаются недействительными, если событие не отменено.

Обратите внимание, что этот метод, скорее всего, отсутствует в старых браузерах!Поэтому убедитесь, что он существует, прежде чем пытаться вызвать его.