javascript - 複数のフォームを持つ ASP.NET Web フォームでの HTML5 入力検証

Question

ASP.NET Web フォームに複数のフォームがあり (Web フォームにはフォーム タグが 1 つしかないため、実際にはタグです) 、入力フィールドにdivHTML5 属性を適用しました。required各フォームは個別に送信することができ、各フォームで検証が個別に機能することを望みます。ただし、2 番目のフォームを送信すると、ブラウザは最初のフォームのフィールドが必須であることを示します。

HTML:

<form id="myform" runat="server">
    <div id="div1" class="form">
        <input type="text" name="field1" required="required" />
        <br/>
        <input type="text" name="field2" required="required" />
        <br/>
        <input type="submit" id="btn1" />
    </div>
    <div id="div2" class="form">
        <input type="text" name="field3" required="required" />
        <br/>
        <input type="text" name="field4" required="required" />
        <br/>
        <input type="submit" id="btn2" />
    </div>
</form>

JS:

$(document).ready(function () {

    $('.form').each(function () {
        $(this).validate({
            submitHandler: function (form) { // for demo
                alert('valid form');
                return false;
            }
        });
    });

    $('#btn1').click(function (e) {
        var formValid = true;
        // loop through all input controls
        $('#div1 input').each(function () {
            //use HTML5 checkValidity function
            if (this.checkValidity()) {              
                //do something
            } else {
                //do something else
                formValid = false;
            }
        });
        if (!formValid) {
            alert('Form 1 invalid');
        } else {
            alert('Form 1 valid');
        }
    });

    $('#btn2').click(function (e) {
        var formValid = true;
        // loop through all input controls
        $('#div2 input').each(function () {
            //use HTML5 checkValidity function
            if (this.checkValidity()) {
                //do something
            } else {
                //do something else
                formValid = false;
            }
        });
        if (!formValid) {
            alert('Form 2 invalid');
        } else {
            alert('Form 2 valid');
        }
    });
});

同じためにJSFiddleを作成しました：http://jsfiddle.net/6Fs9y/132/

基本的に、フォーム全体ではなく、入力のみを検証したいと考えています。this.checkValidity()と の両方を使用してみましthis.validity.validたが、どちらも同じ動作を示します。また、エラーが発生novalidateしたときにタグを使用するreturn falseと、フィールドが必要であることを示すポップアップ メッセージが表示されなくなります ( http://jsfiddle.net/6Fs9y/133/ )。

これを行う方法はありますか？ティア。