Question

HTML

<form action="#" id="MyForm" name="MyForm">
<table id="tblData">
    <tr>
        <td>
            <label >
                A</label>
            <input id="A" name="A" type="text" value="" />
        </td>
    </tr>
    <tr>
        <td>
            <span id="submitButton">Next</span>
        </td>
    </tr>
</table>
</form>

JQuery的

$(document).ready(function () {
    $('#submitButton').validate(
    {
        rules: {
            A:
            {
                required: false,
                range: [1, 100]
            }
        },
        messages: {
            A: {
                range: jQuery.validator.format("Please enter a valid range.")
            }
        }
    });
});

脚本文件

<script src="/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"
    ></script>

问题

如果你注意HTML，我们有跨度。我想在单击此跨度而不是输入按钮上验证表单。问题是，验证没有发生。我怎么能这样做？

的 JSFiddle Link

Answer 1

$(document).ready(function () {

    $("#submitButton").click(function(){
        $('#MyForm').submit();
    });

    $('#MyForm').validate({
        rules: {
            A: {
                required: true,// here set false if not require as you did it in your question
                range: [1, 100]
            }
        },
        messages: {
            A: {
                range: jQuery.validator.format("Please enter a valid range.")
            }
        }
    });

});

参见 demo 并参考validate

Answer 2

您需要升级您的jquery

取自http://jqueryvalidation.org/：

必需

jQuery，使用1.6.4,1.7.2,1.8.3,1.9.0进行测试

所以也许使用这个：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 3

我更新了小提琴，您现在可以在Link

看到答案

我将代码更改为：

$(document).ready(function () {
$('#submitButton').click(function () {


    $("#MyForm").validate({
        rules: {
            A: {
                required: false,
                range: [1, 100]
            }
        },
        messages: {
            A: {
                range: jQuery.validator.format("Please enter a valid range.")
            }
        }
    });
  });

});

如何通过跨度点击验证表单

的 JSFiddle Link

3 个答案: