0

jQuery検証関数を使用してjQueryUIダイアログを検証したいのですが、いくつか問題があります。入力フィールドのテキストを検証する簡単な例を実行したいと思います。フィールドには、数値を表すデータが含まれている必要があります。以下のコードをご覧ください。どうすればこれを達成できますか？

<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>

4

1 に答える 1

0

簡単な例は、このような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/

于 2013-01-16T17:54:03.917 に答える