Jqueryがアクセシブルな複数ステップフォームで検証する

私はスクリーンリーダーでうまく動作し、各ステップでJquery Validateプラグインを使用する簡単な複数ステップの連絡フォームを作成しようとしています。Jqueryがアクセシブルな複数ステップフォームで検証する

私はフォーカスを変更し、うまくいきますスクリーンリーダーユーザーのための新しいページを発表するスクリプトを持っています。しかし、私は検証スクリプトで働くことに問題があります。手順1で作業していますが、手順2と3ではバイパスされます。

次のボタンでは、1つではなく2つのクリックが必要です。私がどこに間違っているのか誰にでも教えてくれますか？バリデーションの設定方法は次のとおりです。ここで進行中の

$(".next").click(function() { 
var form = $("#contact-multi"); 
form.validate({ 
    errorClass: 'help-block', 
    highlight: function(element, errorClass, validClass) { 
    $(element).closest('.form-group').addClass("has-error"); 
    }, 
    unhighlight: function(element, errorClass, validClass) { 
    $(element).closest('.form-group').removeClass("has-error"); 
    }, 
    errorPlacement: function(error, element) { 
    if (element.prop('type') === 'radio' || element.prop('type') === 'checkbox') { 
     error.insertBefore(element.parent()); 
    } else { 
     error.insertBefore(element); 
    } 
    } 
}); 
    if (form.valid() === true) { // If statement here? 



    } 
});

仕事：

https://jsfiddle.net/ldigital/8b3rwobk/2/

出典

2017-03-14 okass