[RESOLVED] Adding validation

[wild_bill]

[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.

[BlackRiver]

I think this could help you get started.

[sapator]

Finally someone that would like client side stuff and not MVC BS! (and after that wild_bill declares that he uses MVC, and i die! :P )
So anyhow, this is me completely ignoring the validation controls that BlackRiver posted as i don't use server side paging (of course web services and WCF are used).

//just an example, you must fix it.
// Using Jquery  -- add your Jquery latest version to the script
// I use 2 html textboxes and get their value
  var musername = $('#text2user').val();
    var memail = $('#text3em').val();
// test the 4 character of, let's say a username :

 var mul = musername.toString();
  
    if (mul.length < 4) {
        $('#divmaster').append('<p id="plg" style="color:red;">Small username!  </p> ');
        return false;
    }
// Please notice the append, that way i create a <p> on the fly close to the "divmaster" div i want it to show(need to id and place somewhere the divmaster div so it can be found). So if you have your field in that div, it will show below, or you can append it into the field you want, whatever you like.

// now an email check
 if (isEmail(memail) == false) {

        $('#divmasterlogend').append('<p id="plg" style="color:red;">Email is invalid!  </p> ');
        return false;
    }

// isEmail is an innovating Microsoft JS function that....Oh, hold,ignore MS innovation, after all they steal or buy stuff for a living,so it's the regex pattern you asked, or at least a pattern for the email.
//Here is the function:
function isEmail(email) {

    return /^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*$/.test(email);
};

//Big but sooo goood :)

///That's it

I would also suggest to do a validation on the server side if you are going to pass something on the server, with a, p.e. web service, else if it is just client page validation do not bother and general don't bother with the asp.net validation controls, they will just add overhead for nothing.

P.S. We don't care for your Visual Studio version since this is pure JAVASCRIPTEEERRRR!!!

[jmcilhinney]

Finally someone that would like client side stuff and not MVC BS!

You do know that MVC supports client-side validation, right?

[sapator]

Yes, in a very very hard way! They tend to make it "our client side controls" and avoid scripting. That's why I've started learning PHP.

[jmcilhinney]

Yes, in a very very hard way! They tend to make it "our client side controls" and avoid scripting. That's why I've started learning PHP.

Um, how is it that you cr*p on about how bad MVC is and you don't even know how it works? There are no controls at all in MVC, never mind validation controls. MVC uses jQuery. Hey, isn't jQuery a JavaScript library? You go and learn that PHP because you've obviously never learned ASP.NET MVC.

[sapator]

I said client side controls,meaning Html.

[BlackRiver]

So in my defense, the validation controls I showed actually generate JavaScript, so they work client side

[sapator]

I'm not sure. They have runat="server" so that is an indication for the overhead. Like updatepanel, that is "supposed" to run on client.
I guess it's up to the OP to do whatever he feels is more suitable for him.

[BlackRiver]

Could be, but all of those controls have a EnableClientScript property to enable or disable client side validation. And they also have RunAt Server...OK, confused

[jmcilhinney]

Could be, but all of those controls have a EnableClientScript property to enable or disable client side validation. And they also have RunAt Server...OK, confused

That means that the validation will be done client-side if possible for efficiency, i.e. if the data fails validation then no request is made to the server so the user is notified of their error more quickly, but the server will still do everything that the server usually does, which is also a backup in case client-side functionality is disabled.

[sapator]

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:

<%@ 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:

<!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&amp;t=635295166417495136" type="text/javascript"></script>


<script src="/zzzzzWebSiteat/WebResource.axd?d=9deZLUgXlZZBNGcHIB6ER1X0zi6fC3U_m7LtLaIDjT9P6Ek79lxFJNrHZDG9K1fFkgY9jCrCwQb6w2nMGNjMYngrIew1&amp;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(&quot;btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, 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:

<%@ 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:

<!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

[jmcilhinney]

@sapator, thank you for that very clever and utterly pointless exercise.

[sapator]

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.