0

我在 ASP.NET Web 表单上有多个表单（实际上是div标签，因为我在 Web 表单上只能有 1 个表单标签），并且我在required输入字段上应用了 HTML5 属性。每个表单都可以独立提交，我希望验证在每个表单上独立工作。但是，如果我提交第二个表单，浏览器会指示第一个表单的字段是必需的。

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()and this.validity.valid，但两者都表现出相同的行为。此外，如果我在遇到错误时使用novalidate带有 a 的标签return false，则指示该字段为必填字段的弹出消息将不再显示（http://jsfiddle.net/6Fs9y/133/）。

有什么办法可以做到这一点？TIA。

4

0 回答 0