{"id":11,"date":"2009-01-05T21:24:53","date_gmt":"2009-01-05T21:24:53","guid":{"rendered":"\/blogs\/benbarefield\/archive\/2009\/01\/05\/validation-controls-are-pretty-cool.aspx"},"modified":"2009-01-05T21:24:53","modified_gmt":"2009-01-05T21:24:53","slug":"validation-controls-are-pretty-cool","status":"publish","type":"post","link":"https:\/\/www.benbarefield.com\/blog\/2009\/01\/05\/validation-controls-are-pretty-cool\/","title":{"rendered":"Validation controls are pretty cool"},"content":{"rendered":"<p>I&#8217;ve been reading an ASP.Net book lately and just got to the information about Validation controls.&nbsp; These seem like a pretty sweet way to get a lot done with very little code.&nbsp; For example, say a that I want a text field that is required, all I have to do is add:<\/p>\n<div style=\"border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 100.93%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, 'Courier New', courier, monospace; height: 34px; background-color: #f4f4f4\">\n<div style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\"><span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:RequiredFieldValidator<\/span> <span style=\"color: #ff0000\">ID<\/span><span style=\"color: #0000ff\">=\"reqNum\"<\/span> <span style=\"color: #ff0000\">runat<\/span><span style=\"color: #0000ff\">=\"server\"<\/span>  <\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">    <span style=\"color: #ff0000\">ControlToValidate<\/span><span style=\"color: #0000ff\">=\"txtUser\"<\/span> <span style=\"color: #ff0000\">Text<\/span><span style=\"color: #0000ff\">=\"Number is required\"<\/span><span style=\"color: #0000ff\">\/&gt;<\/span> <\/pre>\n<\/div>\n<\/div>\n<p>This will perform a validation on a control named &#8220;txtUser&#8221; making sure that it has a value.&nbsp; This is all I have to do to get both client-side Javascript validation and server-side validation.&nbsp; Both of these validations will fire, so if the user has Javascript disabled in their browser, the server-side validation will still happen.&nbsp; However, be fore warned that the pages is posted and the click event will fire, regardless of whether or not the input is valid.&nbsp; There is a property of the Page class called IsValid that is set to false if a validation control has failed.&nbsp; This means that your button&#8217;s click function should look something like this:<\/p>\n<div style=\"border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 101.63%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, 'Courier New', courier, monospace; height: 34px; background-color: #f4f4f4\">\n<div style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\"><span style=\"color: #0000ff\">if<\/span> (Page.IsValid)<\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">{ doStuff(); }<\/pre>\n<\/div>\n<\/div>\n<p>The RequiredFieldValidator also has an initial value as a property, and will fail if the field is still that initial value.&nbsp; This is especially useful with Drop Downs that you want to make sure that the user has selected a value in:<\/p>\n<div style=\"border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 101.38%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, 'Courier New', courier, monospace; height: 135px; background-color: #f4f4f4\">\n<div style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\">Region: <span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:DropDownList<\/span> <span style=\"color: #ff0000\">ID<\/span><span style=\"color: #0000ff\">=\"lstRegion\"<\/span> <span style=\"color: #ff0000\">runat<\/span><span style=\"color: #0000ff\">=\"server\"<\/span><span style=\"color: #0000ff\">&gt;<\/span><\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">         <span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:ListItem<\/span> <span style=\"color: #ff0000\">Value<\/span><span style=\"color: #0000ff\">=\"0\"<\/span> <span style=\"color: #ff0000\">Selected<\/span><span style=\"color: #0000ff\">=\"True\"<\/span><span style=\"color: #0000ff\">&gt;<\/span>Choose a region<\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\">         <span style=\"color: #0000ff\">&lt;\/<\/span><span style=\"color: #800000\">asp:ListItem<\/span><span style=\"color: #0000ff\">&gt;<\/span><\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">         <span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:ListItem<\/span> <span style=\"color: #ff0000\">Value<\/span><span style=\"color: #0000ff\">=\"1\"<\/span><span style=\"color: #0000ff\">&gt;<\/span>East<span style=\"color: #0000ff\">&lt;\/<\/span><span style=\"color: #800000\">asp:ListItem<\/span><span style=\"color: #0000ff\">&gt;<\/span><\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\">         <span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:ListItem<\/span> <span style=\"color: #ff0000\">Value<\/span><span style=\"color: #0000ff\">=\"2\"<\/span><span style=\"color: #0000ff\">&gt;<\/span>West<span style=\"color: #0000ff\">&lt;\/<\/span><span style=\"color: #800000\">asp:ListItem<\/span><span style=\"color: #0000ff\">&gt;<\/span><\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">        <span style=\"color: #0000ff\">&lt;\/<\/span><span style=\"color: #800000\">asp:DropDownList<\/span><span style=\"color: #0000ff\">&gt;<\/span><\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\"><span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:RequiredFieldValidator<\/span> <span style=\"color: #ff0000\">ID<\/span><span style=\"color: #0000ff\">=\"reqRegion\"<\/span> <span style=\"color: #ff0000\">runat<\/span><span style=\"color: #0000ff\">=\"server\"<\/span> <\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\"> <span style=\"color: #ff0000\">ControlToValidate<\/span><span style=\"color: #0000ff\">=\"lstRegion\"<\/span> <span style=\"color: #ff0000\">Text<\/span><span style=\"color: #0000ff\">=\"Choose a region\"<\/span> <span style=\"color: #ff0000\">InitialValue<\/span><span style=\"color: #0000ff\">=\"0\"<\/span><span style=\"color: #0000ff\">\/&gt;<\/span><\/pre>\n<\/div>\n<\/div>\n<p>Now if the user does not change the value of the Drop Down, the validation will fail.<\/p>\n<p>There are three other built in validators and you can create custom validators.&nbsp; The custom validators can have a client-side validation function written in JavaScript or VBScript, but they should always have a server-side function tied to OnServerValidate in case the user has scripts turned off in the browser.&nbsp; There is a lot to be said about validation controls, but I&#8217;d like to mention a couple other things I found interesting.<\/p>\n<p>You can use one CompareValidator to validate the value and type of a field.&nbsp; Setting the Operator to something besides &#8220;DataTypeCheck&#8221; and setting the Type property will both make sure the value fulfills the comparison and is of the right type.&nbsp; For example, if you wanted the user to input an integer greater than 0, you could use the following validation control:<\/p>\n<div style=\"border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 101.83%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, 'Courier New', courier, monospace; height: 59px; background-color: #f4f4f4\">\n<div style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\">\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\"><span style=\"color: #0000ff\">&lt;<\/span><span style=\"color: #800000\">asp:CompareValidator<\/span> <span style=\"color: #ff0000\">ID<\/span><span style=\"color: #0000ff\">=\"compNumber\"<\/span> <span style=\"color: #ff0000\">runat<\/span><span style=\"color: #0000ff\">=\"server\"<\/span> <\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none\"> <span style=\"color: #ff0000\">ControlToValidate<\/span><span style=\"color: #0000ff\">=\"txtNumber\"<\/span> <span style=\"color: #ff0000\">Text<\/span><span style=\"color: #0000ff\">=\"Must be an integer greater than 0\"<\/span> <\/pre>\n<pre style=\"padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, 'Courier New', courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none\"> <span style=\"color: #ff0000\">Type<\/span><span style=\"color: #0000ff\">=\"Integer\"<\/span> <span style=\"color: #ff0000\">Operator<\/span><span style=\"color: #0000ff\">=\"GreaterThan\"<\/span> <span style=\"color: #ff0000\">ValueToCompare<\/span><span style=\"color: #0000ff\">=\"0\"<\/span><span style=\"color: #0000ff\">\/&gt;<\/span><\/pre>\n<\/div>\n<\/div>\n<p>Another thing to note is that by default these validation controls will take up the space on the page required by the value of the Text property.&nbsp; Setting the Display property to &#8220;Dynamic&#8221; will make them only take up space if the message is visible.&nbsp; If you plan on having multiple validations on the same control, you should make the Display=&#8221;Dynamic&#8221; so that you don&#8217;t end up with strange looking blank spots.<\/p>\n<p>Here&#8217;s the plug: I&#8217;ve been reading &#8220;Core Internet Application Development with ASP.Net 2.0&#8221; by Randy Connolly.&nbsp; I&#8217;ve found it quite good so far.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been reading an ASP.Net book lately and just got to the information about Validation controls.&nbsp; These seem like a pretty sweet way to get a lot done with very little code.&nbsp; For example, say a that I want a &hellip; <a href=\"https:\/\/www.benbarefield.com\/blog\/2009\/01\/05\/validation-controls-are-pretty-cool\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,18],"tags":[],"class_list":["post-11","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-web-programming"],"_links":{"self":[{"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/posts\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":0,"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/posts\/11\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/media?parent=11"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/categories?post=11"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benbarefield.com\/blog\/wp-json\/wp\/v2\/tags?post=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}