Jquery验证submitHandler无法使用Jquery UI对话框

时间:2011-12-13 21:19:16

标签: javascript jquery jquery-validate jquery-ui-dialog

好的 - 我有一个使用jquery-ui模式对话框的模态对话框表单,对话框按钮应该提交表单。

单击“添加实用程序”按钮时,将调用form.submit操作,但不会调用invalidHandler,submitHandler或notNone方法。该表单也从未提交给Web服务,因此它不仅仅是跳过验证部分。

任何帮助以找出验证未运行的原因将非常感谢!谢谢!

使用Javascript:

$(document).ready(function () {
     $.validator.addMethod('notNone', 
                          function (value, element) { return (value != 'none');}, 
                          'Please select an option.');
    $("#modal-form-addUtility").validate({
        errorContainer: "#errorblock-div1, #errorblock-div2",
        errorLabelContainer: "#errorblock-div2 ul",
        wrapper: "li",
        rules: {
             utilitySelectComboBox: {
                notNone: true
            }
        },
        invalidHandler: submitHandler: function (form) {
            alert("Invalid");
        },
        submitHandler: function (form) {
            alert("Submitted");
        }
    });
     $('#AddUtility').click(function () {
        $("#AddUtilityDialog").dialog("open");
    });
     $("#AddUtilityDialog").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,

        buttons: {
            "Add Utility": function () { $("#modal-form-addUtility").submit(); },
            Cancel: function () {
                $("#modal-form-addUtility").resetForm();
                $(this).dialog("close");
            }
        }
    });
});

HTML代码:

<input type="button" id="AddUtility" name="AddUtility" value="Add"/>
<div id="AddUtilityDialog" class="ui-widget" title="Add New Utility">
    <div class="ui-widget ui-helper-hidden" id="errorblock-div1">
        <div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;" id="errorblock-div2" style="display:none;"> 
            <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
                         <strong>Alert:</strong> Errors detected!</p>
            <ul></ul>
        </div>
    </div>

    <form action="/TextManager.svc/AddUtility" name="modal-form-addUtility" id="modal-form-addUtility" method="POST">
        <fieldset>
            <label>Select Utility </label>
            <select id="utilitySelectComboBox">   
                <option value="none">Select one...</option>
                <option value="5506">PEE DEE Electric - 5506</option>
                <option value="5505">Mower County Electric - 5505</option>    
            </select>
        </fieldset>
    </form>
</div>

0 个答案:

没有答案