Chapter 5: Validating Form Input

snaebjorn · November 4th, 2014, 10:23 AM

I have the book in front of me. I have the latest WebMatrix3, and I have tried everything, to re-installs to redoing the code and taking care of spellings (I know that C# is case sensitive). I'm at a loss as to why it doesn't work. I even put the output on the screen (variables and outputs from the functions; debugging technique) as the program is running. Am I missing declarations of some kind (Using statements etc.)? Do I need MVC or other packages? I know this is a simple program (as a computer programmer, I always tried to "Keep it simple stupid").

SnÃ¦bjÃ¶rn

Imar · November 4th, 2014, 11:44 AM

Is App_Code in the root of the site? Maybe you're accidentally working in the site's parent folder so the code folder ends up being in a sub folder instead if directly in the root?

snaebjorn · November 4th, 2014, 12:28 PM

My program is kasta, and directly under that is App_Code folder, folder App_data, bin folder, Content folder, Images folder, Shared folder. _PageStart.cshtml, Default.cshtml, favicon.ico, Sell.cshtml and Web.config, all in the root.

Web.config: <?xml version="1.0" encoding="utf-8"?>

<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
</system.web>
</configuration>

For some reason, the helper functions Selected and Checked don't show up as methods (Intellisense...Helpers.cshtml file). The program runs; until I click on the Sell nav bar then I get the "context" error.

jpjamie · November 5th, 2014, 12:52 PM

Quote:

Originally Posted by Mike Brind

You seem to have omitted @Html.ValidationMessage("email"), which is the placeholder for the email validation message. It should appear just under the following line of code:

<input type="text" name="email" value="@Request["email"]" />

Imar or Mike:

I get string truncation errors while validating a comment text area using jquery (accordion) code and it seems my problem was related to the placement of the validation summary code.
When I enter text over the 250 char limit, into a text area comment (code set for > 250 char) I get the ugly error message, but not the validation warning.

I have increased the database column length of the question's comments to 950, which helps to 950 characters, but the validation is still failing at 200 characters.

Update Later Today:
I just VPN'd in to work and after checking my code on my machine at work and the book in Chapter 5 page 134 in the TRY IT OUT step #5, I noticed there are separate <div></div> tags and one set of <div></div> tags for the textarea with the name description. As you can see in my code below, my Q22Comments validation @Html.ValidationMessage("Q22Comments") is within and part of <DIV id="Radios22">. So, I will put my Q22Comments textarea between <div></div> tags and give it another go tomorrow. I could do it and test it via my VPN connection, but I need a (wife) life!

Code:

<p><strong>@Html.ValidationSummary(true)</strong></p>




if(Request["Q22Comments"].Length > 200) {
   ModelState.AddError("Q22Comments", "Sorry, your comments exceeded 200 characters.");    
}



<DIV id="Radios22">
<strong>What will you administer now?</strong>
    
   
    <p><input type="radio" name="Q22" value="A" @Helpers.Checked("Q22", "A") />A: Atracurium<br/>
     <input type="radio" name="Q22" value="B" @Helpers.Checked("Q22", "B") />B: Fentanyl<br/>  
     <input type="radio" name="Q22" value="C" @Helpers.Checked("Q22", "C") />C: Midazolam<br/>
     <input type="radio" name="Q22" value="D" @Helpers.Checked("Q22", "D") />D: Propofol<br/>   
     <input type="radio" name="Q22" value="E" @Helpers.Checked("Q22", "E") />E: Haloperidol 
             
          
     <p>Comments:<br/>
            <textarea name="Q22Comments" rows="2" cols="40">@Request["Q22Comments"]</textarea>
<br/>
    @Html.ValidationMessage("Q22Comments")

</DIV>

Imar · November 6th, 2014, 02:34 PM

The <div> tags shouldn't matter; however, the summary should go below the code that adds the errors.

Cheers,

Imar

Imar · November 6th, 2014, 02:36 PM

>> My program is kasta, and directly under that is App_Code folder, folder App_data, bin folder,

So is App_Code at the root of the site, or is it in the Kasta folder? Maybe you can post a screenshot of your site in Web Matrix somewhere online?

Imar

jpjamie · November 6th, 2014, 08:14 PM

Quote:

Originally Posted by Imar

The <div> tags shouldn't matter; however, the summary should go below the code that adds the errors.

Cheers,

Imar

Yeah thanks! I "fingered" that out today.
<div> tag placement and surrounding the comments in div tags with named ID's didn't matter.
So will plunk the summary below the code that adds the errors and see if that does it.

Thinking about asking the "client" if comments are really needed, hate to do that though.

Really frustrating, in that the radio buttons validate just fine, but comments don't. I'll eventually get it figured out.

I'm working on this code in Visual Studio 2010 and hope to get it into a dev/int/prod environment once the validation is fixed.

I "pulled" this code into Visual Studio and while I'm glad the WebMatrix is editable and runs with VS, wish I'd written this exam in Visual Studio in native ASP.net as the coding resources seem more robust. Also, I'm being distracted from finishing your ASP.NET 4.5.1 book (up chapter 13 GridView and SqlDataSource Controls), which is going very well.

Really like that book, but I need to pay more attention to details!!

So Cheers and thanks for the help again, might need more.

Jim

Imar · November 8th, 2014, 08:09 AM

>> Really frustrating, in that the radio buttons validate just fine, but comments don't. I'll eventually get it figured out.

Can you post the full code for the page?

Imar

jpjamie · November 9th, 2014, 10:52 PM

Quote:

Originally Posted by Imar

>> Really frustrating, in that the radio buttons validate just fine, but comments don't. I'll eventually get it figured out.

Can you post the full code for the page?

Imar

Yes and will do from work tomorrow!

Thanks!

OK here is the code...

Sorry about no line numbers. I bolded the code for the validation summary and where I think the code issue exists with comments for question 1. I'm using @HTML validation for comments, which may be the problem as maybe using @Helpers might fix things for comment validation. Opened this file is VS 2010 and could not get line number so display. Must not be requesting numbers in the right place.

Code:

@{ Response.OutputCache(10); } 
<!DOCTYPE html>


<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Critical Care Rotation Final Exam - Section I</title>
    
        
<link href="../Styles/jquery-ui-1.8.17.custom.css" type=text/css rel=stylesheet>
<link href="../Styles/Accordion_Valid.css" type=text/css rel=stylesheet>        
<script src="../JQuery/jquery-1.7.1.min.js" type=text/javascript></SCRIPT>
<script src="../JQuery/jquery-ui-1.8.17.custom.min.js" type=text/javascript></SCRIPT>


<script language="JavaScript">

function exists(userEntry, message) { 
var aCharExists = 0; var entry = userEntry; 
if (entry) {
for (var i=0; i<entry.length; i++) {
//spaces don't count as "existence"
if (entry.charAt(i) != " ") {
aCharExists = 1;
}
}
} 

if (!aCharExists) {
alert(message);
}
} 


</script>


<SCRIPT type=text/javascript>
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });
				$("#accordion2").accordion({ header: "h3" });
                $("#accordion3").accordion({ header: "h3" }); 
                $("#accordion4").accordion({ header: "h3" }); 
								
			});
		</SCRIPT>

 <STYLE type=text/css>
    
    BODY {
	MARGIN: 80px; FONT: 62.5% "Trebuchet MS", sans-serif
}
.demoHeaders {
	MARGIN-TOP: 2em
}
#dialog_link {
	PADDING-RIGHT: 1em; PADDING-LEFT: 5px; PADDING-BOTTOM: 0.4em; PADDING-TOP: 0.4em; POSITION: relative; TEXT-DECORATION: none
}
#dialog_link SPAN.ui-icon {
	LEFT: 0.2em; MARGIN: -8px 5px 0px 0px; POSITION: absolute; TOP: 10%
}
UL#icons {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
UL#icons LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 4px; MARGIN: 2px; CURSOR: pointer; PADDING-TOP: 4px; LIST-STYLE-TYPE: none; POSITION: relative
}
UL#icons SPAN.ui-icon {
	FLOAT: left; MARGIN: 0px 4px
}


DIV #Labs1 {
         
    position: relative; top: 5px; left: 560px; width: 330px; height: 160px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    color:  #000000;
	border-top: thin solid;  
    float: left;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid black;   
         
     }

DIV #Radios1 {
         
    position: relative; top: 5px; left: -355px; width: 510px; height: 230px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid black;   
            
     }
     
 DIV #Q1Comments {
         
    position: relative; top: 160px; left: -880px; width: 310px; height: 60px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
               
     }    

DIV #Radios2 {
         
    position: relative; top: 10px; left: -2px; width: 600px; height: 240px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid black;   
            
     }


 DIV #Q2Comments {
         
    position: relative; top: 170px; left: -616px; width: 310px; height: 60px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
               
     }    



   DIV #Radios3 {
         
    position: relative; top: 10px; left: -3px; width: 1040px; height: 210px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid black;   
            
     }
  
  
   DIV #Q3Comments {
         
    position: relative; top: 160px; left: -1060px; width: 310px; height: 60px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
              
     }    

   
     DIV #Radios4 {
         
    position: relative; top: 10px; left: -205px; width: 580px; height: 210px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid black;   
            
     }  
     
     
     
   DIV #Q4Comments {
         
    position: relative; top: 160px; left: -800px; width: 310px; height: 60px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
               
     }  
     
     DIV #Labs4 {
         
    position: relative; top: 10px; left: 630px; width: 180px; height: 135px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    color:  #000000;
	border-top: thin solid;  
    float: left;
    padding: 10px;
    margin-bottom: 10px;
    border: 2px solid black;   
         
     }
     
   DIV #Radios5 {
         
    position: relative; top: 10px; left: 0px; width: 380px; height: 210px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid black;   
            
     }    
     
    
   DIV #Q5Comments {
         
    position: relative; top: 160px; left: -396px; width: 310px; height: 60px;
    text-align: left;
    font-family: Arial;
	font-size: 10pt;
    float: left;
    padding: 10px;
    margin-bottom: 10px;
               
     }   
      

</STYLE>    
            
     <META content="MSHTML 6.00.6000.17107" name=GENERATOR>
  
 <title>Final Extended Exam - Section I</title>       
                  
 </head>
 <body> 

       
<div align="left">

  

<form name="sw" action="" method="post"> 
  
    
@if (IsPost)
{
  var errors = String.Empty;

  if (Request["Q1"].IsEmpty())
  {
    errors += "<li>Question 1</li>";
  }
  if (Request["Q2"].IsEmpty())
  {
    errors += "<li>Question 2</li>";
  }
  if (Request["Q3"].IsEmpty())
  {
    errors += "<li>Question 3</li>";
  }
  if (Request["Q4"].IsEmpty())
  {
    errors += "<li>Question 4</li>";
  }
  if (Request["Q5"].IsEmpty())
  {
    errors += "<li>Question 5</li>";
  }


  if (errors.IsEmpty())
  {
    
    
    
    <div align="center">
    <div align="left" class="boxAnswers1">   
    
    <div>Question 1: @Request["Q1"]</div> 
    <div>Comments: @Request["Q1Comments"]</div> 
    <div>Question 2: @Request["Q2"]</div>
    <div>Comments: @Request["Q2Comments"]</div> 
    <div>Question 3: @Request["Q3"]</div>
    <div>Comments: @Request["Q3Comments"]</div> 
    <div>Question 4: @Request["Q4"]</div>
    <div>Comments: @Request["Q4Comments"]</div> 
    <div>Question 5: @Request["Q5"]</div>
    <div>Comments: @Request["Q5Comments"]</div> 
</div>
 </div>
    var Id = Request["Id"];
    var Q1 = Request["Q1"];
    var Q1Comments = Request["Q1Comments"];
    var Q2 = Request["Q2"];
    var Q2Comments = Request["Q2Comments"];
    var Q3 = Request["Q3"];
    var Q3Comments = Request["Q3Comments"];
    var Q4 = Request["Q4"];
    var Q4Comments = Request["Q4Comments"];
    var Q5 = Request["Q5"];
    var Q5Comments = Request["Q5Comments"];



    var db = Database.Open("CCS");
    var sql = "";

    sql = "UPDATE FinalExtExam SET Q1 = @0, Q1Comments = @1, Q2 = @2, Q2Comments = @3, Q3 = @4, Q3Comments = @5, Q4 = @6, Q4Comments = @7, Q5 = @8, Q5Comments = @9 WHERE Id = @10";
    db.Execute(sql, Request["Q1"], Request["Q1Comments"], Request["Q2"], Request["Q2Comments"], Request["Q3"], Request["Q3Comments"], Request["Q4"], Request["Q4Comments"], Request["Q5"], Request["Q5Comments"], Id);


    Response.Redirect("SectionOnePosted.cshtml?id=" + Id);


  }
  else
  {


    if (Request["FirstName"].IsEmpty())
    {
      ModelState.AddError("FirstName", "Please enter your first name!");
    }

    if (Request["LastName"].IsEmpty())
    {
      ModelState.AddError("LastName", "Please enter your last name!");
    }

    if (Request["Q1"].IsEmpty())
    {
      ModelState.AddError("Q1", "Please select an answer...");
    }

    if (Request["Q1Comments"].Length > 250)
    {
      ModelState.AddError("Q1Comments", "Sorry, your comments exceeded 250 characters.");
    }


    if (Request["Q2"].IsEmpty())
    {
      ModelState.AddError("Q2", "Please select an answer...");
    }

    if (Request["Q2Comments"].Length > 250)
    {
      ModelState.AddError("Q2Comments", "Sorry, your comments exceeded 250 characters.");
    }


    if (Request["Q3"].IsEmpty())
    {
      ModelState.AddError("Q3", "Please select an answer...");
    }

    if (Request["Q3Comments"].Length > 250)
    {
      ModelState.AddError("Q3Comments", "Sorry, your comments exceeded 250 characters.");
    }


    if (Request["Q4"].IsEmpty())
    {
      ModelState.AddError("Q4", "Please select an answer...");
    }

    if (Request["Q4Comments"].Length > 250)
    {
      ModelState.AddError("Q4Comments", "Sorry, your comments exceeded 250 characters.");
    }


    if (Request["Q5"].IsEmpty())
    {
      ModelState.AddError("Q5", "Please select an answer...");
    }

    if (Request["Q5Comments"].Length > 250)
    {
      ModelState.AddError("Q5Comments", "Sorry, your comments exceeded 250 characters.");
    }

    if (!ModelState.IsValid)
    {
      ModelState.AddFormError("Please answer all questions and fix errors below before submitting this section.");


    }

  }
}


<div class="boxHeader"> 
  <img alt="Start" src ="../Images/Mayo_Section1_1436x100.png" />       
 </div> 

<p>@Html.ValidationSummary(true)</p>
  
 
    
<DIV id="accordion">

<DIV>
<H3><A href="file:///C:/TEMP/JQuery/jquery-ui-1.8.17.custom/index.html#"><strong>Question 1 @Html.ValidationMessage("Q1") </strong></a></H3>
<DIV id="Q1">
 
<p> Question 1 is asked here.</p>

    
    
       
<DIV id="Labs1">
<strong>Hemodynamic Data:</strong>
<ul type="square">

<li>Systolic arterial blood pressure: 88 mm Hg</li>		
<li>Diastolic arterial blood pressure: 72 mm Hg</li>
<li>Right atrial pressure: 14 mm Hg</li>
<li>Systolic pulmonary artery pressure: 36 mm Hg</li>    		
<li>Diastolic pulmonary artery pressure: 26 mm Hg</li>		
<li>Pulmonary capillary wedge pressure: 24 mm Hg</li> 		
<li>Cardiac output: 3.3 L/min</li>					
</DIV>
  
    
    
<DIV id="Radios1">  
    <strong>Secondary question asked here?</strong>    
    <p><input type="radio" name="Q1" value="A" @Helpers.Checked("Q1", "A") />A: Radio Button Answer A <br/>
     <input type="radio" name="Q1" value="B" @Helpers.Checked("Q1", "B") />B: Radio Button Answer B <br/>  
     <input type="radio" name="Q1" value="C" @Helpers.Checked("Q1", "C") />C: Radio Button Answer C <br/>
     <input type="radio" name="Q1" value="D" @Helpers.Checked("Q1", "D") />D: Radio Button Answer D <br/> 
    <input type="radio" name="Q1" value="E" @Helpers.Checked("Q1", "E") />E: Radio Button Answer E <br/> 
</DIV>  
<div id="Q1Comments">       
     <p>Comments:<br/>
            <textarea name="Q1Comments" rows="2" cols="40">@Request["Q1Comments"]</textarea><br/></p>
 @Html.ValidationMessage("Q1Comments")</div>           
     

  
       
</DIV>
</DIV>


<DIV>
<H3><A href="file:///C:/TEMP/JQuery/jquery-ui-1.8.17.custom/index.html#"><strong>Question 2 @Html.ValidationMessage("Q2")</strong></a></H3>
<DIV id="Q2">

<p>Qeustion 2 is asked here. 

  
    
    
    <DIV id="Radios2">   
    <strong>Secondary question is askde here?</strong><br /> 
    <p><input type="radio" name="Q2" value="A" @Helpers.Checked("Q2", "A") />A:  Radio Button Answer A<br/>
     <input type="radio" name="Q2" value="B" @Helpers.Checked("Q2", "B") />B: Radio Button Answer B<br/>  
     <input type="radio" name="Q2" value="C" @Helpers.Checked("Q2", "C") />C: Radio Button Answer C<br/>
     <input type="radio" name="Q2" value="D" @Helpers.Checked("Q2", "D") />D: Radio Button Answer D<br/>
     <input type="radio" name="Q2" value="E" @Helpers.Checked("Q2", "E") />E: Radio Button Answer E
      </DIV>

<div id="Q2Comments">     
     <p>Comments:<br/>
            <textarea name="Q2Comments" rows="2" cols="40">@Request["Q2Comments"]</textarea><br/>
    @Html.ValidationMessage("Q2Comments")
</div>  
</DIV>
</DIV>  
    
    
<DIV>
<H3><A href="file:///C:/TEMP/JQuery/jquery-ui-1.8.17.custom/index.html#"><strong>Question 3 @Html.ValidationMessage("Q3")</strong></a></H3>
<DIV id="Q3">
   
<p>Question 3 is asked here.</p>


<DIV id="Radios3">
<strong>Secondary question asked here?</strong> 
   <p><input type="radio" name="Q3" value="A" @Helpers.Checked("Q3", "A") />A: Radio Button Answer A<br/>
     <input type="radio" name="Q3" value="B" @Helpers.Checked("Q3", "B") />B: Radio Button Answer B<br/>  
     <input type="radio" name="Q3" value="C" @Helpers.Checked("Q3", "C") />C: Radio Button Answer C<br/>
     <input type="radio" name="Q3" value="D" @Helpers.Checked("Q3", "D") />D: Radio Button Answer D<br />
     <input type="radio" name="Q3" value="E" @Helpers.Checked("Q3", "E") />E: Radio Button Answer E
  
</DIV>    

<div id="Q3Comments">       
     <p>Comments:<br/>
            <textarea name="Q3Comments" rows="2" cols="40">@Request["Q3Comments"]</textarea><br/>
 @Html.ValidationMessage("Q3Comments")
</div>       


       
</DIV>
</DIV>      

<DIV>
<H3><A href="file:///C:/TEMP/JQuery/jquery-ui-1.8.17.custom/index.html#"><strong>Question 4 @Html.ValidationMessage("Q4")</strong></a></H3>
<DIV id="Q4">
    
<p>Question 4 is asked here</p>

<div id="Labs4">
<strong>The laboratory values were:</strong>

<ul type="square">    
 <li>Na = 136</li>
 <li>K = 3.6</li>
 <li>Cl = 70</li>
 <li>HCO3 = 19</li>
 <li>pH = 7.58</li>
<li>PaCO2 = 21</li>
</ul>
</div>

<DIV id="Radios4">

<strong>Secondary question based on lab values is asked here:</strong>
   <p><input type="radio" name="Q4" value="A" @Helpers.Checked("Q4", "A") />A: Radio Button Answer A<br/>
     <input type="radio" name="Q4" value="B" @Helpers.Checked("Q4", "B") />B: Radio Button Answer B<br/>  
     <input type="radio" name="Q4" value="C" @Helpers.Checked("Q4", "C") />C: Radio Button Answer C<br/>
     <input type="radio" name="Q4" value="D" @Helpers.Checked("Q4", "D") />D: Radio Button Answer D<br /> 
     <input type="radio" name="Q4" value="E" @Helpers.Checked("Q4", "E") />E: Radio Button Answer E
         
 </DIV>   
 
<div id="Q4Comments">       
     <p>Comments:<br/>
            <textarea name="Q4Comments" rows="2" cols="40">@Request["Q4Comments"]</textarea><br/>
 @Html.ValidationMessage("Q4Comments")
</div>       

      
</DIV>
</DIV>         


<DIV>
<H3><A href="file:///C:/TEMP/JQuery/jquery-ui-1.8.17.custom/index.html#"><strong>Question 5  @Html.ValidationMessage("Q5")</strong></a></H3>
<DIV id="Q5">
 <p>Question 5 is asked here.</p>

    
 <DIV id="Radios5">  
     <strong>Question based on information above asked here?</strong>  
    <p><input type="radio" name="Q5" value="A" @Helpers.Checked("Q5", "A") />A: Radio Button Answer A<br/>
     <input type="radio" name="Q5" value="B" @Helpers.Checked("Q5", "B") />B: Radio Button Answer B<br/>  
     <input type="radio" name="Q5" value="C" @Helpers.Checked("Q5", "C") />C: Radio Button Answer C<br/>
     <input type="radio" name="Q5" value="D" @Helpers.Checked("Q5", "D") />D: Radio Button Answer D<br/>
     <input type="radio" name="Q5" value="E" @Helpers.Checked("Q5", "E") />E: Radio Button Answer E
   
</DIV>    

<div id="Q5Comments">       
     <p>Comments:<br/>
            <textarea name="Q5Comments" rows="2" cols="40">@Request["Q5Comments"]</textarea><br/>
 @Html.ValidationMessage("Q5Comments")
</div>       

       
</DIV>
</DIV>   


    
</DIV>
    
  

    
   <br>
<br>
<div align="center">

    
    
<table border="0" cellpadding="3">
<tr>
<td align="left" valign="middle">
<input type="hidden" name="ApplicationName" value="Name" />        
<input type="submit" value="Submit" onClick="willReset=confirm('Submit and open/start Section 2?');return willReset;">
<input type="reset" value="Clear & Reset" onClick="willReset=confirm('Are you sure you want to Reset?');return willReset;">
</td>
</tr>
 
</table>
 
    
</div>
</div>    
    
</form> 
    


</DIV>
</DIV>    
    
 </body>
 </HTML>

snaebjorn · November 10th, 2014, 12:10 PM

How do I use System.OperatingSystem to get the variables such as which version of Windows and service packs?