Question

我想用jQuery验证函数验证jQuery UI对话框，但是我遇到了一些问题。我想得到一个简单的例子，我在其中验证输入字段的文本 - 该字段应该被要求包含数据，这应该代表一个数字。请参阅下面的代码。我怎么能做到这一点？

<head>
    <script src="../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
    <link href="../Styles/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    #field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>
<script type="text/javascript">
    var validationNumber = null;
    function GetNumberValidator() {
        return $("#FormToValidate").validate({
            rules: {
                TextToValidate: {
                    required: true,
                    digits: true
                }
            }
        });
    }
    $(function () {
        $("#button1").button();
        $("#dialog-message").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function () {
                    if (validationNumber.element("#TextToValidate")) {                  
                        $(this).dialog("close");
                    }
                }
            }
        });
    });
    $().ready(function () {
        $("#button1").click(function () {
            $("#dialog-message").dialog("open");
        }
        );
        validationNumber = GetNumberValidator();
    });        
</script>
<title>Dialog Number</title>
</head>
<body>
<button id="button1">A button element</button>    
<form id="FormToValidate" action="DialogNumber.html" method="post">   
<div id="dialog-message" title="Input">
    <input id="TextToValidate" name="TextToValidate" type="text" />
    <div id="ErrorMessage"></div>
</div>
</form>
</body>

Answer 1

一个简单的例子可能有像这样的HTML

<body>
    <a href="#">open the dialog</a>
    <div id="dialog">
        <form>
         <input name="TextToValidate" class="required number" />
         <input type="submit" />
        </form>
    </div>
</body>

以及文档就绪函数中的这样一个脚本

$('form').validate();
$("#dialog").dialog({ autoOpen: false });
$('a').click(function () {
    $("#dialog").dialog("open");
});

就是这样，或者如果你的表单无效，你可能需要挂钩到beforeClose事件来做一些事情：

$("#dialog").dialog({ autoOpen: false,
    beforeClose: function () {
        if (!$('form').valid()) {
            alert('form not valid');
            return false;
        }
    }
});

小提琴就在这里 - http://jsfiddle.net/Jj9Pt/

jQuery UI对话框+验证+数字

1 个答案: