how to display validation summary of an asp.net page using Javascript - c#

I have one asp.net form.
In it i have many fields which are required.
I want to display validation summary of all fields at the end of the form.
I have already checked for valid values of input controls.
Now i only want is Summary.
Here is my code for valid data input
<script language="javascript" type="text/javascript">
function userCheck(uName) {
var uName = document.getElementById(uName);
var letters = /^[A-Za-z0-9]+$/;
if (uName.value.match(letters) && uName.value.length != 0) {
uName.style.border = "2px solid #008A2E";
return true;
}
else {
uName.value = uName.value.replace(/[\W]/g, '');
uName.style.border = "2px solid #ff0000";
uName.focus();
return false;
}
}
</script>
This is just one function for username check.
I have many more to deal with.
Is there any way to display summary from all fields at the last when submit button is pressed ?
below solution is not working.
function ddlcheck(ddlclg) {
var clg = document.getElementById(ddlclg.id);
var clgname = document.getElementById('<%= LblCollegeName.ClientID %>');
clgname.style.display = "block";
clgname.innerHTML = "Selected College : " + clg.options[clg.selectedIndex].value;
clg.style.border = "1px solid #008A2E";
if (clg.options[clg.selectedIndex].value == "Select") {
clgname.style.display = "none";
clg.style.border = "1px solid #ff0000";
validationhtml = validationhtml + "<b>*</b> College" + "</br>";
}
}
above code is for dropdownlist.
function select() {
var count = 0;
var chkSelectAll = document.getElementById('<%= ChkSelectAll.ClientID %>');
var chkList = document.getElementById('<%= chk.ClientID %>').getElementsByTagName("input");
for (var i = 0; i < chkList.length; i++) {
if (chkList[i].checked == true) {
count++;
}
}
if (count == chkList.length)
chkSelectAll.checked = true;
else {
chkSelectAll.checked = false;
}
}
above code is for selected check boxes.

create a div ( errorreport) at required location validation summary give it style as you needed
After that
<script language="javascript" type="text/javascript">
var validationhtml="";
function userCheck(uName) {
var uName = document.getElementById(uName);
var letters = /^[A-Za-z0-9]+$/;
if (uName.value.match(letters) && uName.value.length != 0) {
uName.style.border = "2px solid #008A2E";
return true;
} else {
uName.value = uName.value.replace(/[\W]/g, '');
uName.style.border = "2px solid #ff0000";
uName.focus();
validationhtml=validationhtml +"uname is not correct" ;
return false;
}
}
function validationsummary() {
// if using jquery
$(".errorreport").html(validationhtml);
//for javascript
document.getelementbyid("errorreport").innerHTML = validationhtml;
if(validationhtml == "") {
return true;
} else {
return false;
}
}
</script>
and call validationsummary() on submit button click

Related

How to bypass Form Action?

I am trying to bypass my form action="WFMSWI.aspx" , my form is working perfectly on my system but when i am testing on server the form comes through a proprietary software which provides database and inputs the form action automatically, which i not allowing my C# code to trigger. I tried using J query ajax but in URL it cannot the method because they change the URL too, if I put anything action like action="#" they change it no matter what.What can do to bypass it and that my method triggers instead of it. i also tried using Handler but nothing is working. Everything is working perfectly in local system and in server too it doesn't show any error it just fires form action rather than my c# code.
Form Action:
<form action="WFMSWI.aspx" id="form1" runat="server" method="post" name="form1">
Form Button:
<input type="button" ID="submit" class="btn btn-success" value="Approve" />
<button id="hiddenButton" runat="server" onserverclick="btnClick_Click" style="display:none;" ></button>
Java Script :
<script type="text/javascript">
var isEmpty = function (element) {
if ($("#" + element).val() == "" || $("#" + element).val() == null) {
return true;
} else {
return false;
}
};
var arrayCheck = function (array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == false) {
return false;
}
};
return true;
};
function arrayAssign(array, num) {
for (var i = 0; i < num; i++) {
array[i] = false;
};
return array;
};
function validationCheck(array, number, element) {
if (isEmpty(element)) {
$("#" + element).parent(".form-group").addClass("has-error");
array[number] = false;
} else {
$("#" + element).parent(".form-group").removeClass("has-error");
array[number] = true;
}
};
var pass1 = [];
$(document).ready(function () {
if ($.browser.msie) {
if (parseInt($.browser.version) < "9.0") {
alert("Sorry! This form does not support your current IE version, please use Firefox/Google Chrome to submit.");
}
}
var preSig = $('#stu-sig-bit').val();
$('#stu-sig').attr('src', preSig);
var fakeVari = $("#typea").val();
$("#esignature").jSignature({
"background-color": "transparent",
"decor-color": "transparent",
"color": "#1489FF",
});
$("#clear").click(function () {
$("#esignature").jSignature("reset");
});
$("input[type=text]").attr("readonly", true);
$("textarea1").attr("readonly", true);
//$("input[type=radio]").attr("disabled", "disabled");
$("#reject-reason").attr("readonly", false);
$("#submit").click(function () {
$("#bitmap").val($("#esignature").jSignature("getData"));
arrayAssign(pass1, 2);
pass1[2] = false;
validationCheck(pass1, 0, "remaining_work");
validationCheck(pass1, 1, "deadline_date");
pass1[2] = true;
if (!arrayCheck(pass1)) {
return false;
}
else if ($("#esignature").jSignature("getData", "native").length == 0) {
alert("Please sign at bottom of the form.");
return false;
} else {
$("#iso_sig").val($("#bitmap").val());
$("#iso_decision").val("no");
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var temp = (month < 10 ? "0" : "") + month + "/" + (day < 10 ? "0" : "") + day + "/" + date.getFullYear();
$("#iso_date").val(temp);
var answer = confirm('Are you sure you want to approve the case?');
if (answer == true) {
document.getElementById('<%= hiddenButton.ClientID %>').click();
} else {
return false;
}
}
});
$("#reject-button").click(function () {
$("#bitmap").val($("#esignature").jSignature("getData"));
if (isEmpty("reject-reason")) {
alert("Please write down the reason why you reject the request.");
return false;
} else if ($("#esignature").jSignature("getData", "native").length == 0) {
alert("Please sign at bottom of the form.");
return false;
} else {
$("#iso_sig").val($("#bitmap").val());
$("#iso_decision").val("no");
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var temp = (month < 10 ? "0" : "") + month + "/" + (day < 10 ? "0" : "") + day + "/" + date.getFullYear();
$("#iso_date").val(temp);
var answer = confirm('Are you sure you want to reject the case?');
if (answer == true) {
} else {
return false;
}
}
});
});
</script>
Code Behind:
namespace HTMLtoPDF
{
public partial class HTMLtoPDF : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnClick_Click(object sender, EventArgs e)
{
DownloadAsPDF();
}
public void DownloadAsPDF()
{
}
}
}

how to stop page from refreshing everytime a checkbox is click

Okay, as simple as possible, I have a checkboxlist that has autopostback set to true and a OnSelectedIndexChanged. However, every time someone clicks a item in the checkbox, the page refreshes. How do I stop this? I've tried using UpdatedPanel(It kind of work).
<asp:CheckBoxList ID="Regions" runat="server" OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true" DataSourceID="SqlDataSource2" DataTextField="Regions" DataValueField="ID">
</asp:CheckBoxList>
The OnselectedIndexChange displays a div of other checkboxes beside the one checkboxlist.
protected void Regions_SelectedIndexChanged(object sender, EventArgs e)
{
string select = #"Select Facilities from [BulletinBoard].[DMHSAS\290974].[Facilities] ";
int[] ctr = new int[9];
int ctr1 = 0;
int counter = 0;
dFacilities.Style.Add("display", "block");
foreach (ListItem item in Regions.Items)
{
//Response.Write(item.Selected);
if (Regions.SelectedIndex == 0)
{
item.Selected = true;
CheckBoxList1.Visible = true;
counter++;
}
else if (item.Selected)
{
if (select.EndsWith("[Facilities] "))
{
select += "where ";
}
if (select.EndsWith(") "))
{
select += " or ";
}
select += " (Reg_ID = " + Regions.SelectedIndex + ") ";
ctr[ctr1 + 1] = Regions.SelectedIndex;
item.Selected = false;
counter++;
CheckBoxList1.Visible = true;
}
ctr1++;
}
if (counter == 0)
{
CheckBoxList1.Visible = false;
dFacilities.Style.Add("display", "none");
}
ctr1 = 0;
bool all = false;
foreach (int counter1 in ctr)
{
Regions.Items[counter1].Selected = true;
if (Regions.Items[0].Selected == true)
foreach (ListItem item in Regions.Items)
{
if (item.Selected)
{
all = true;
}
else
{
all = false;
break;
}
}
if (all == false)
{
Regions.Items[0].Selected = false;
}
}
You seem to really like the classic .NET postback workflow, but rather than continue down the webforms path of trying to hide postbacks, even though you want them because it makes the logic easier, why not just try sidestepping it just this one time? If, as you say, you want to prevent the page refresh (aka the postback) then there are a few things you can do to prevent it entirely.
At the top of your page:
<style type="text/css">
.hideme
{
display: none;
}
</style>
<script type="text/javascript>
var checkBoxes = document.getElementById("<%= Regions.ClientID %>")
.getElementsByTagName("input");
var cbListIDss = [
"<%= CheckBoxList1.ClientID %>",
"etc"
];
function toggle(i, chkElement)
{
if (chkElement.type == "checkbox") {
if (chkElement.checked) {
var cbElement = document.getElementById(cbListIDss [i]);
cbElement.className = cbElement.className.replace("hideme", "");
break;
}
}
}
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].onClick += toggle(i, checkBoxes[i]);
}
</script>
Edit: Then, in your control, remove these attributes: OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true"
I didn't add the code for modifying the select variable in your postback method, but that can be done in js as well via a hidden input field.
Alternatively, the reason your update panel is not working is because you have
if (Regions.SelectedIndex == 1)
{
select += " where Reg_ID = 1";
dFacilities.Style.Add("display", "block");
// note the number at the end of this variable
CheckBoxList1.Style.Add("display", "block");
}
if (Regions.SelectedIndex == 2)
{
select += "where Reg_ID = 2";
dFacilities.Style.Add("display", "block");
// note the number at the end of this variable
// All of these are adding display to CheckBoxList1,
// even though it seems like these should be adding
// the display property to CheckBoxList2, 3, etc.
CheckBoxList1.Style.Add("display", "block");
}

CheckboxList not getting selected values in javascript

I have checkbox list in asp.net as:
<asp:CheckBoxList ID="chbUserType" RepeatDirection="Horizontal" runat="server">
</asp:CheckBoxList>
I have binded it as:
chbUserType.DataSource = dtRoles;
chbUserType.DataValueField = "idRole";
chbUserType.DataTextField = "Title";
chbUserType.DataBind();
foreach (ListItem li in chbUserType.Items)
{
li.Attributes.Add("JSvalue", li.Value);
}
I want to get its selected values in javascript.
For that i have done as follows:
var userType = "";
var chkBox = document.getElementById('<%=chbUserType.ClientID %>');
var options = chkBox.getElementsByName('input');
var listOfSpans = chkBox.getElementsByTagName('span');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
if (i != options.length - 1) {
userType = listOfSpans[i].attributes["JSvalue"].value + ",";
}
else {
userType = listOfSpans[i].attributes["JSvalue"].value;
}
}
}
alert(userType);
I am not getting anything in alert.
Please help me how can i achieve this???
Edit 2 :
Generated HTML
<span jsvalue="2"><input id="MainContent_chbUserType_1" type="checkbox" name="ctl00$MainContent$chbUserType$1" value="2"><label for="MainContent_chbUserType_1">Dispatcher</label></span>
I think if you use the getElementsByTagName on your inputs instead of getElementsByName you'll be fine...
Here is a jsfiddle link that I think represents your problem
var userType = "";
var chkBox = document.getElementById('checkboxlist');
var options = chkBox.getElementsByTagName('input');
var listOfSpans = chkBox.getElementsByTagName('span');
for (var i = 0; i < options.length; i++) {
console.log(options[i].checked);
if (options[i].checked) {
if (i != options.length - 1) {
userType = listOfSpans[i].attributes["JSvalue"].value + ",";
}
else {
userType = listOfSpans[i].attributes["JSvalue"].value;
}
}
}

why listbox selected index changed is not firing?

I have written a javascript method to sortlistbox items and it works well in a sense that the item that I type in text box gets highlighted.
But when I click on the highlighted item it dosen't gets selected. Why?
The selectedIndexchanged is not working.
Here is my javascript code:
function SearchList() {
var l = document.getElementById("<%= LBox.ClientID %>");
var tb = document.getElementById("<%= txtDepartments.ClientID %>");
if (tb.value == "") {
ClearSelection(l);
}
else {
for (var i = 0; i < l.options.length; i++) {
if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase())) {
l.options[i].selected = true;
return false;
}
else {
ClearSelection(l);
}
}
}
}
function ClearSelection(l) {
l.selectedIndex = -1;
}
Do this, then call your function inside, you need to reference jquery library :
$(document).ready(function() {
$('#' + '<%= DropdownName.ClientID %>').change(function() {
// Call function here...
});
});

How can I highlight a word within gridview

How can I highlight the text of a query in the gridview control?
if you want do this client side please follow this steps:
add jQuery reference to your page.add a text input calles txt_Search.
and then use this script:
$(document).ready(function () {
$('#txt_Search').keyup(function () {
searchTable($(this).val());
});
function searchTable(inputVal) {
var table = $('#GridView1');
table.find('tr').each(function (index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(
function (index, td) {
var regExp = new RegExp(inputVal, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}});
if (found == true) $(row).show(); else $(row).hide();
}
});
}
});
var gv = document.getElementById("#GridView1");
for (var i = 0; i < gv.all.length; i++) {
var cellValue = grid.rows[i].cells[0].elements[0];
cellValuestyle.background = '#DD00DD';
}
search the text, dress them with a tag like <label>, and don't forget to add highlight style for the labels.

Categories