0
私はjquery validate pluginを使用して、jquery UI Dialog内のコントロールとasp.net内のコントロールの両方を検証する必要があります形。jqueryの検証プラグインをjqueryのUIダイアログ内とaspフォーム内の同じasp.netページ内のすべて
はJavaScript：
<script type="text/javascript">
var table = [];
$(document).ready(function() {
$("button, input:submit, input:button").button();
$("#<%=txtDate.ClientID %>").datepicker();
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$("#dialog:ui-dialog").dialog("destroy");
$("#form2").validate({
rules: {
price: {
required: true,
number: true
},
description: {
required: true
}
}
});
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Detail": function() {
var valid = $("#form2").validate().form();
if (valid) {
$("#save").button("enable");
addDetail();
$("#save").attr('disabled',false);
$(this).dialog("close");
}
},
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
$("#price").val("");
$("#description").val("");
}
});
$("#newDetail")
.button()
.click(function() {
$("#dialog-form").dialog("open");
});
$("#<%=form1.ClientID %>").validate({
rules: {
<%=txtDate.ClientID %> : {
required: true,
dateEU: true
},
<%=txtCompany.ClientID %> : {
required: true
}
},
submitHandler: function(form) {
form.submit();
}
});
});
function addDetail() {
table.push({
codigo: 0,
documentoCompra: {
"codigo": "0"
},
price: document.getElementById('price').value,
description: document.getElementById('description').value
});
showRow(table.length - 1);
}
function removeDetail(r) {
var node = r.parentNode;
while (node && node.tagName !== 'TR') {
node = node.parentNode;
}
var i = node.rowIndex;
document.getElementById('DetailTable').deleteRow(i);
table.splice(i - 1, 1);
if (table.length == 0) {
document.getElementById('save').disabled=true;
$("#save").button("disable");
}
}
function showRow(i) {
if (table.length > 0) {
var tbl = document.getElementById('DetailTable');
var newRow = tbl.insertRow(tbl.rows.length);
var cell3 = newRow.insertCell(0);
cell3.innerHTML = table[i].description;
var cell4 = newRow.insertCell(1);
cell4.innerHTML = table[i].price;
var cell2 = newRow.insertCell(2);
cell2.innerHTML = '<a href="#"><img src="images/delete.jpg" width="14" height="14" alt="Delete" onclick="removeDetail(this)"/></a>'
document.getElementById('save').disabled=false;
}
}
</script>
HTMLとAsp.netマークアップ：
：<form id="form1" runat="server">
<fieldset style="width: 85%">
<legend>MASTER</legend>
<div id="contenido1" class="ui-widget">
<table width="90%" class="ui-widget ui-widget-content">
<tr>
<td align="left" class="ui-widget-header ">
COMPANY
</td>
<td align="left">
<asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="ui-widget-header ">
DATE
</td>
<td align="left">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="ui-widget-header ">
TYPE
</td>
<td align="left">
<asp:DropDownList ID="ddlTipoDoc" runat="server">
<asp:ListItem Text="BOLETA" Value="B" Selected="True"></asp:ListItem>
<asp:ListItem Text="RECIBO CAJA CHICA" Value="R"></asp:ListItem>
<asp:ListItem Text="FACTURA" Value="F"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</div>
<input type="submit" id="save" value="Save" disabled="disabled" />
<input type="button" id="cancelar" value="Cancel" />
</fieldset>
</form>
<!--Detail -->
<div>
<fieldset style="width: 85%">
<legend>DETAIL</legend>
<div id="dialog-form" title="Add New Detail">
<p>
All the fields are required.</p>
<form id="form2">
<table>
<tr>
<td>
<label for="description" id="lbldescription">
Description</label>
</td>
<td>
<input type="text" name="description" id="description" class="text ui-widget-content ui-corner-all" />
</td>
</tr>
<tr>
<td>
<label for="price" id="lblprice">
Price</label>
</td>
<td>
<input type="text" name="price" id="price" class="text ui-widget-content ui-corner-all" />
</td>
</tr>
</table>
</form>
</div>
<div id="content" class="ui-widget">
<table id="DetailTable" class="ui-widget ui-widget-content" style="text-align: center">
<thead>
<tr class="ui-widget-header ">
<td width="60%">
Description
</td>
<td width="20%">
Price
</td>
<td width="10%">
Delete
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<table border="0" style="width: 90%">
<tr>
<td colspan="3">
<button id="newDetail" style="float: right">
Add</button>
</td>
</tr>
</table>
</fieldset>
</div>
それは私はほとんどそれが準備をしていたことは事実ですが、私はまだいくつかの疑問を持っています
検証ルールを満たさずにダイアログを閉じた後、ダイアログ内のコントロールからエラーメッセージを削除するにはどうすればよいですか？
エラーメッセージを表示するコントロールのすぐ下にエラーメッセージを表示する方法を教えてください。
あなたは、ダイアログの検証で行ったことが正しいかどうかチェックするのに十分親切でしょうか？私は最初にバリデーションルールを追加し、 "Add Detail"ボタンを押したときに実行されるコードの中に、コントロールが正しく検証されたかどうかをチェックする条件を追加しました。私は私のSkyDriveの、任意のアイデアや提案がされます実際に
非常にシンプルなものにsample project(JqueryDialog_JqueryValidate)をアップロードした
詳細」テーブルに新しい行を追加するには、大幅に
編集を高く評価しました：だから、入力
<style type="text/css">
input:focus
{
border: 2px dotted black;
}
input.error
{
border: 2px solid red;
}
label.error
{
color: white;
text-indent:2px;
font-size: 16px;
font-weight:bold;
font-family: Nyala;
background-color: red;
display:block ;
}
</style>
http://jsfiddle.net/でサンプルプロジェクトを実装して、自分でプロジェクトを展開することはできませんか？ –
しかし、それはasp.netのマークアップを持って、何か問題はありますか？ – eddy
少なくともコードの一部をここに投稿するので、画像を取得する –