I have a Grid. Add & Edit has been done through modal popup . For modal pop-up i have used template. I want to have multiple forms in modal pop-up . There each form should have its own validation.
sample code :
<div id="CurrentDiv">
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.Name)
</div>
<div class="editor-field">
<input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="StationName"></span>
</div>
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.ChannelID)
</div>
<div class="editor-field">
<input name="ChannelID" id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text"
required="required" validationMessage="Channel Required!"
data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled" />
<span class="k-invalid-msg" data-for="ChannelID"></span>
<a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
</div>
</div>
div id="divChannel" style="display:none;">
<div class="editor-label">
Name :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannleName"></span>
</div>
<div class="editor-label">
Description :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannelDescrip"
name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannelDescrip"></span>
</div>
<div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
<script type="text/javascript" language="javascript">
function SaveChannel() {
$.ajax({
type: "POST",
url: "/Channel/CreateAjax",
data: {
Id: '0',
Name: $("#ChannleName").val(),
Descrip: $("#ChannelDescrip").val(),
Enabled: true
},
error: function (error) {
alert(error);
},
success: function (response) {
alert(response);
}
})
return false;
}
function showHideChannel(show) {
if (show) {
$("#divChannel").show();
$('#CurrentDiv').hide();
$(".k-edit-form-container").find(".k-grid-update").hide();
$(".k-edit-form-container").find(".k-grid-cancel").hide();
$(".k-window-title").html("Add Channel");
} else {
dsChannelDropdown.read();
if ($("#ChannleName").val() != "") {
var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
ddlChannelID.text($("#ChannleName").val());
}
$("#divChannel").hide();
$('#CurrentDiv').show();
$(".k-edit-form-container").find(".k-grid-update").show();
$(".k-edit-form-container").find(".k-grid-cancel").show();
$(".k-window-title").html("Add/Edit Station");
}
}
</script>
on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .
sample code :
<div id="CurrentDiv">
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.Name)
</div>
<div class="editor-field">
<input class="text-box single-line" id="StationName" required="required" name="StationName" validationMessage="Station Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="StationName"></span>
</div>
<div class="editor-label">
@this.Html.LabelFor(model => model.Stations.ChannelID)
</div>
<div class="editor-field">
<input name="ChannelID" id="ddlChannelID" data-source="dsChannelDropdown" data-text-field="Text"
required="required" validationMessage="Channel Required!"
data-value-field="Value" data-bind="value:ChannelID" data-role="dropdownlist" data-option-label="Select Channel..." disabled="disabled" />
<span class="k-invalid-msg" data-for="ChannelID"></span>
<a href="javascript:void(0)" onclick="showHideChannel(true);">Add</a>
</div>
</div>
div id="divChannel" style="display:none;">
<div class="editor-label">
Name :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannleName"name="ChannleName" validationMessage="Channle Name Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannleName"></span>
</div>
<div class="editor-label">
Description :
</div>
<div class="editor-field">
<input class="text-box single-line" id="ChannelDescrip"
name="ChannelDescrip" validationMessage="Channel Description Required!" type="text" value="" />
<span class="k-invalid-msg" data-for="ChannelDescrip"></span>
</div>
<div>
<a class='k-button k-button-icontext' onclick='SaveChannel();'>Add</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Cancel</a>
<a class='k-button k-button-icontext' onclick='showHideChannel(false);'>Back</a>
</div>
</div>
<script type="text/javascript" language="javascript">
function SaveChannel() {
$.ajax({
type: "POST",
url: "/Channel/CreateAjax",
data: {
Id: '0',
Name: $("#ChannleName").val(),
Descrip: $("#ChannelDescrip").val(),
Enabled: true
},
error: function (error) {
alert(error);
},
success: function (response) {
alert(response);
}
})
return false;
}
function showHideChannel(show) {
if (show) {
$("#divChannel").show();
$('#CurrentDiv').hide();
$(".k-edit-form-container").find(".k-grid-update").hide();
$(".k-edit-form-container").find(".k-grid-cancel").hide();
$(".k-window-title").html("Add Channel");
} else {
dsChannelDropdown.read();
if ($("#ChannleName").val() != "") {
var ddlChannelID = $("#ddlChannelID").data("kendoDropDownList")
ddlChannelID.text($("#ChannleName").val());
}
$("#divChannel").hide();
$('#CurrentDiv').show();
$(".k-edit-form-container").find(".k-grid-update").show();
$(".k-edit-form-container").find(".k-grid-cancel").show();
$(".k-window-title").html("Add/Edit Station");
}
}
on click of add button it will show channelDiv and will hide currentDiv on click of Add button it will call ajax method and will save channel and will take you back to currentDiv where in dropdown currently added channel will appear. and on click of update button of main div it will save station information in db .
problem is on click of update in Main modal pop-up , it calls validation of all Divs , where as I want validation of currentDiv should be done . and on click of Add button of channelDiv it should validate Channel Div .