[RESOLVED] Adding validation
[VS2010]
It's been a couple years since I've had to do UI work, so I'm pretty rusty (and I was never very good in the first place :))
For my first field I would like to require the user entery 4 or more characters.
For my second field I would like to use a regex pattern.
I would prefer to do both of these client side, as it seems like a waste to make a trip to the server.
I would like the error messages to show up by the respective fields, as opposed to a summary at the bottom of the page.
Thank you for all and any help.
Re: [RESOLVED] Adding validation
Efficiency?
So i had some time today and i decided to make a head to head compare of a simple validation.
I am going to use the requered validator VS Javascript.
I am going to simply put a button and textbox and require not to be empty.
First the ASP.NET validator, bummer it can't use html control so runat server control it is:
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1" EnableClientScript="true">a</asp:RequiredFieldValidator>
<asp:Button ID="btnSave" runat="server" Text="Save"></asp:Button>
</div>
</form>
</body>
</html>
Ok a simple page with the lovable validator.
Now let's look at the page source:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MzE3MjUxOTRkZCVsh5nIXcbhdTNW0cflTTksCbf8" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/zzzzzWebSiteat/WebResource.axd?d=-JmIycveKgyl74aztGWHmitUT3g7zqg2ks8uk0CKFj6V_H0BnYw-_s_wDYbz9KDUBbBDpD8Ym6W0YrGE3i45aUSMkcM1&t=635295166417495136" type="text/javascript"></script>
<script src="/zzzzzWebSiteat/WebResource.axd?d=9deZLUgXlZZBNGcHIB6ER1X0zi6fC3U_m7LtLaIDjT9P6Ek79lxFJNrHZDG9K1fFkgY9jCrCwQb6w2nMGNjMYngrIew1&t=635295166417495136" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A6A94209" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwL99ufOAQLs0bLrBgKct7iSDP9l7UbxmnDIROoDMITYs8oUT1ME" />
</div>
<div>
<input name="TextBox1" type="text" id="TextBox1" />
<span id="RequiredFieldValidator1" style="color:Red;visibility:hidden;">a</span>
<input type="submit" name="btnSave" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSave", "", true, "", "", false, false))" id="btnSave" />
</div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator1"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var RequiredFieldValidator1 = document.all ? document.all["RequiredFieldValidator1"] : document.getElementById("RequiredFieldValidator1");
RequiredFieldValidator1.controltovalidate = "TextBox1";
RequiredFieldValidator1.errormessage = "RequiredFieldValidator";
RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator1.initialvalue = "";
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
ValidatorOnLoad();
}
function ValidatorOnSubmit() {
if (Page_ValidationActive) {
return ValidatorCommonOnSubmit();
}
else {
return true;
}
}
//]]>
</script>
</form>
</body>
</html>
What the?! Ok but no worries i am sure the javascript source code will be 3 times bigger.
Let's go:
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Runcl() {
$('#plg').remove();
var musername = $('#Text1').val();
var mul = musername.toString();
if (mul.length == 0) {
$('#d1').append('<p id="plg" style="color:red;">Small username! </p> ');
return false;
}
else {
//do stuff
}
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" onclick="Runcl();" />
<div id='d1'></div>
</div>
</form>
</body>
</html>
Hahaha, that is pathetic, i had to write all this code down when on asp.net validator i just used a "controltovalidate". Stupid JS, i bet the source code is huuuuuuuge!!
Let's see:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Runcl() {
$('#plg').remove();
var musername = $('#Text1').val();
var mul = musername.toString();
if (mul.length == 0) {
$('#d1').append('<p id="plg" style="color:red;">Small username! </p> ');
return false;
}
else {
//do stuff
}
}
</script>
<title>
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZEZYxZfU6jInXQEwuuaO9zgmeOnw" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="AE704222" />
</div>
<div>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" onclick="Runcl();" />
<div id='d1'></div>
</div>
</form>
</body>
</html>
Ah, emm, errr, no, I, I, what happened? What happen is that the asp.net source is 3,28 KB and the JS code is 1,24 KB, so it's almost 3 times smaller?!
That concluded our lesson of validator overhead on asp.net pages, thank you, please study chapters 1 to 4 till Monday and make notes and questions.
P.S. Admittedly i used Jquery, so someone would say that the whole Jquery JS is loaded (i am betting asp.net validator is doing something far more worst) but i could just used getelementbyid, no Jquery load.
P.S.2 would be interesting if anyone is to make the same validation using MVC, can't recall now how MVC will validate(probably an attribute, or ModelState.IsValid ?) and how many code pages needed. Would be interested to see the view source result, bet it would be 0,5 KB , counting the view, controller and model pages :)
Re: [RESOLVED] Adding validation
@sapator, thank you for that very clever and utterly pointless exercise.
Re: [RESOLVED] Adding validation
Welcome.
I just gave the OP something to think when going asp.net controls VS JS. in a large scale page it could highly improve performance...
Pointless how? I see people that still have basic LAN lines speed in Greece.
