Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts

    validate a dynamic form

    I have a dynamic employment application on an asp.net page that is built at runtime depending on some values that are derived through the app.config file. There are 3 different sections that are built dynamically. The 3 sections are previous employers, educational background, and references. Each of these 3 sections can be repeated multiple times according to the value derived from the app.config file. These sections have 17, 5, 5 different inputs respectively.

    While the user is not required to fill in data into all of the subsections within each section, if they fill out data into the first field of each sub section then they have to completely fill out that entire subsection. For example say a client wants input for 4 previous employers on their application. While the user will not be required to enter data into all 4 of the sections if they fill out the first field (name of the previous employer) then they should also fill in the rest of the data regarding that previous employer.

    Since I don't know how many subsections each of the sections may have (if they have any at all), I am stumped as how I should go about validating the users input. Does anyone know how I can validate that if the user fills this field in that I can then make sure all of the other fields of that subsection are filled in?

    TIA

  • #2
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What is building the form dynamically? Is that server side code or javascript?

    david_kw

  • #3
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    Well, (assuming server side [, figured wouldn't have mentioned ASP.NET otherwise]) if you're dynamically creating the form... umm, what's wrong with dynamically creating the javascript to validate it?
    Omnis mico antequam dominus Spookster!

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In either case, it sounds like you were wondering what the validation might look like. This example is based on my understanding of your question.

    Code:
    <html>
      <head>
        <title>Employment App</title>
        <script type="text/javascript">
          function validateForm(frm) {
            if (frm.cname.value != "") { // if company name has a value
              if (frm.cname.value.length < 2) {
                alert("Company name must be at least 2 characters long.");
                return(false);
              } else if (frm.ctitle.value.length < 2) {
                alert("Title must be at least 2 characters long.");
                return(false);
              } else if (isNaN(parseInt(frm.cyears.value))) {
                alert("Number of years must be a number.");
                return(false);
              }
            }
    
            return(true);
          }
        </script>
      </head>
      <body>
        <div>
          <form name="f" action="#" onsubmit="return(validateForm(this));">
            <fieldset id="prevcompany">
              <label for="cname">Last company name</label> <input type="text" name="cname" id="cname" /><br />
              <label for="ctitle">Title</label> <input type="text" name="ctitle" id="ctitle" /><br />
              <label for="cyears">Years with company</label> <input type="text" name="cyears" id="cyears" /><br />
              <input type="submit" />
            </fieldset>
          </form>
        </div>
      </body>
    </html>
    You mentioned it's dynamically created, but from your question it wasn't clear if the dynamic creation was part of what you wanted to know. As Mhtml said you could dynamically create the javascript above as well as the html.

    david_kw


    david_kw

  • #5
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts
    yes the form is built dynamically in asp.net using C#.

    We are trying not to use the built in .net validation and want to write our own instead.

    The javascript should be dynamic in the way it works, it is just that I was hoping to have 1 .js file for validation of the application, and not have to create a new .js file for each client. If there is no way around it I guess we will have to write a program that will create the .js file automatically dependant on the same variables.

  • #6
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts
    the form tag cannot have the onSubmit attribute in it easy enough to work around just add a onClientClick attribute to the asp:button

    But, since the form may have 1 txtEmployerName1
    or 5 of them (maybe even as many as 10, it is dynamic upon the customer's needs) or it may have none

    5 of them would be txtEmployerName1 txtEmployerName2 txtEmployerName3
    txtEmployerName4 txtEmployerName5 etc...

    That is why i cannot do as you mentioned if the page was static yes validation is a breeze then

  • #7
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still not sure I understand what you need but here is another example that is more dynamic.

    Code:
    <html>
      <head>
        <title>Employment App</title>
        <script type="text/javascript">
          function validateForm(frm) {
            var i = 1;
            var c = document.getElementById("txtEmployerName" + i);
            while (c) {
              if (c.value != "") {
                if (c.value.length < 2) {
                  alert("Company name #" + i + " must be at least 2 characters long.");
                  return(false);
                } else if (frm["ctitle" + i].value.length < 2) {
                  alert("Title #" + i + " must be at least 2 characters long.");
                  return(false);
                } else if (isNaN(parseInt(frm["cyears" + i].value))) {
                  alert("Number of years #" + i + " must be a number.");
                  return(false);
                }
              }
              c = document.getElementById("txtEmployerName" + ++i);
            }
    
            return(true);
          }
        </script>
      </head>
      <body>
        <div>
          <form name="f" action="#" onsubmit="return(validateForm(this));">
            <fieldset id="company1">
              <label for="txtEmployerName1">Company name #1</label> <input type="text" name="txtEmployerName1" id="txtEmployerName1" /><br />
              <label for="ctitle1">Title</label> <input type="text" name="ctitle1" id="ctitle1" /><br />
              <label for="cyears1">Years with company</label> <input type="text" name="cyears1" id="cyears1" /><br />
            </fieldset>
            <fieldset id="company2">
              <label for="txtEmployerName2">Company name #2</label> <input type="text" name="txtEmployerName2" id="txtEmployerName2" /><br />
              <label for="ctitle2">Title</label> <input type="text" name="ctitle2" id="ctitle2" /><br />
              <label for="cyears2">Years with company</label> <input type="text" name="cyears2" id="cyears2" /><br />
            </fieldset>
            <input type="submit" />
          </form>
        </div>
      </body>
    </html>
    david_kw

  • #8
    Senior Coder
    Join Date
    Dec 2002
    Location
    Arlington, Texas USA
    Posts
    1,062
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Thanks David

    that pointed me in the right direction.

    I was looking at it a different way

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    There are anumber of ways of addressing this problem

    this uses the form element array
    and allows for different types of verification on an element type

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // A = check associated inputs
    // B = check completed
    // C = check 1 is checked
    
    function Validate(frm){
     var eles=frm.elements;
     var eleary=[]
     for (var zxc0=0;zxc0<eles.length;zxc0++){
      var nu=parseInt(eles[zxc0].name.replace(/\D/g,''));
      if (!eleary[nu]){
       eleary[nu]=[];
      }
      eleary[nu].push(eles[zxc0]);
     }
     var message=[];
     for (var zxc1=0;zxc1<eleary.length;zxc1++){
      if (eleary[zxc1]){
       var nme='';
       if (eleary[zxc1][0].value.length>0&&eleary[zxc1][0].name.charAt(eleary[zxc1][0].name.length-1)=='A'){
        for (var zxc2=0;zxc2<eleary[zxc1].length;zxc2++){
         var obj=eleary[zxc1][zxc2];
         if (!nme.match(obj.name)){
          nme+=obj.name+',';
          if (obj.type=='text'&&obj.name.charAt(obj.name.length-1)=='B'){
           if (obj.value.length<1){
            message.push('Please Complete '+obj.title||obj.name);
           }
          }
          if (obj.type=='checkbox'&&obj.name.charAt(obj.name.length-1)=='C'){
           message.push('Please Check One '+obj.title||obj.name);
           var objs=frm[obj.name];
           for (var zxca=0;zxca<objs.length;zxca++){
            if (objs[zxca].checked){
             message.length--;
             break;
            }
           }
          }
         }
        }
       }
      }
     }
     if (message.length==0){ return true; }
     alert(message.join('\n'));
     return false;
    }
    
    
    
    //-->
    </script></head>
    
    <body>
    <form name="fred" >
    
    <input name="Master1A" ><br>
    <input name="name1B" class="Required" title="Name" ><br>
    <input name="company1B" class="Required" title="Company" ><br>
    <input name="info1" class="Info" ><br>
    <input name="address1B"class="Required" title="Company"><br>
    <input name="check1C" title="Employes" type="checkbox" >
    <input name="check1C" title="Employes" type="checkbox" >
    <input name="check1C" title="Employes" type="checkbox" >
    <br>
    <br>
    <input name="Master2A" ><br>
    <input name="name2B" class="Required" title="Name" ><br>
    <input name="company2B" class="Required" title="Company" ><br>
    <input name="info2" class="Info" ><br>
    <input name="address2B"class="Required" title="Company"><br>
    <input name="check2C" title="Employes" type="checkbox" >
    <input name="check2C" title="Employes" type="checkbox" >
    <input name="check2C" title="Employes" type="checkbox" >
    
    
    <input name="button4" type="button" value="Verify All" onclick="Validate(this.form);" >
    </form>
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    I still stand by what I've said. You could write little iterative functions in javascript with little parsers for ids and names that could potentially be computationally expensive, if only inelegant and illogical. Or you could write the validation dynamically as well, embedding it even (or caching it somewhere making it reusable). This would allow for maximum expandability not to mention more complex validation with multi-dependant fields and formatting requirements.

    If you want to design this with future upgrades in mind then this is the way to go, not a hack.

    Of course regardless, you should be doing this on the server side as well to make sure people don't just skip past it (people will be determined enough, I once had Spookster spoofing my shoutbox when I was young'n).

    Just my $0.2, always nice to have another perspective on something.

    [edit:] Or even AJAX and leave the validation on the server side altogether.
    Omnis mico antequam dominus Spookster!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •