好的 - 我有一个使用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>