www.webdeveloper.com
Results 1 to 4 of 4

Thread: Validate a Required Ratio of Form Fields to be Complete

Hybrid View

  1. #1
    Join Date
    Jun 2005
    Posts
    26

    Validate a Required Ratio of Form Fields to be Complete

    I'm looking for a way to validate a specific ratio or percentage of fields in a form. There are several sections that need a ratio such as (any 2 of 6 fields) complete. I'll continue searching, but wanted to know if anyone has seen something along those lines.

    Is there a way to count specific fields and then require >= 2 to be complete?

    Thanks for any help.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    You could scan the document.formName.elements() array, check for 'input' type elements and then check their values, but that could be cumbersome. Since you say you'll be grouping some elements, I'd assign the input elements in each group a unique 'class' attribute and use document.getElementsByClassName() to fetch each group quickly and cleanly. From there, it's a matter of what constitutes a valid entry, how many elements belong to each class, and what the desired ratio is.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    Quote Originally Posted by xover15 View Post
    ... There are several sections that need a ratio such as (any 2 of 6 fields) complete...
    enclose each section by the <div id="section_number"></div> and count the inner elements of input type with value !== '' (not empty)

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Required fields number in a form section</title>
    <style type="text/css">
    body{color:#fff;background-color:#000;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;padding:20px;font-weight:bold;}
    label{display:block;margin-top:10px;font-weight:bold;}
    input[type=text]{margin-left:15px;margin-right:15px;text-align:center;font-style:italic;}
    input.btn{font-weight:bold;margin-left:10px;cursor:pointer;background-color:transparent;color:#ccc;border:none;}
    div{padding:10px 10px;margin:5px 0px;}
    </style>
    <script type="text/javascript">
    function doc(id){return document.getElementById(id);}
    
    function chkFrm(){
    var z=1,reqFields=2,secNum=0,secValid=0;
    
    while(doc('section_'+z)){
    secNum++;
    var inps=doc('section_'+z).getElementsByTagName('input'),
    filled=0;
    for(var k in inps){
    if(inps[k].type!=='text'){continue;}
    if(inps[k].value !== ''){filled++;}
    doc('section_'+z).style.border=(filled!=reqFields)?'2px dashed Crimson':'none';
    if(filled==reqFields){secValid++;break;}
    }
    z++;
    }
    return (secNum==secValid)?true:false;
    }
    
    window.onload=function(){
    doc('mf').onsubmit=function(){return chkFrm();}
    doc('mf').onreset=function(){var n=1;while(doc('section_'+n)){doc('section_'+n).style.border='none';n++;}}
    }
    </script>
    </head>
    <body>
    <form name="mf" id="mf" action="">
    <div id="section_1">
    <label for="inp_1">Section 1 field 1:<input type="text" name="inp_1" id="inp_1" /></label>
    <label for="inp_2">Section 1 field 2:<input type="text" name="inp_2" id="inp_2" /></label>
    <label for="inp_3">Section 1 field 3:<input type="text" name="inp_3" id="inp_3" /></label>
    <label for="inp_4">Section 1 field 4:<input type="text" name="inp_4" id="inp_4" /></label>
    <label for="inp_5">Section 1 field 5:<input type="text" name="inp_5" id="inp_5" /></label>
    <label for="inp_6">Section 1 field 6:<input type="text" name="inp_6" id="inp_6" /></label>
    </div>
    <div id="section_2">
    <label for="inp_7">Section 2 field 1:<input type="text" name="inp_7" id="inp_7" /></label>
    <label for="inp_8">Section 2 field 2:<input type="text" name="inp_8" id="inp_8" /></label>
    <label for="inp_9">Section 2 field 3:<input type="text" name="inp_9" id="inp_9" /></label>
    <label for="inp_10">Section 2 field 4:<input type="text" name="inp_10" id="inp_10" /></label>
    <label for="inp_11">Section 2 field 5:<input type="text" name="inp_11" id="inp_11" /></label>
    <label for="inp_12">Section 2 field 6:<input type="text" name="inp_12" id="inp_12" /></label>
    </div>
    <div id="section_3">
    <label for="inp_13">Section 3 field 1:<input type="text" name="inp_13" id="inp_13" /></label>
    <label for="inp_14">Section 3 field 2:<input type="text" name="inp_14" id="inp_14" /></label>
    <label for="inp_15">Section 3 field 3:<input type="text" name="inp_15" id="inp_15" /></label>
    <label for="inp_16">Section 3 field 4:<input type="text" name="inp_16" id="inp_16" /></label>
    <label for="inp_17">Section 3 field 5:<input type="text" name="inp_17" id="inp_17" /></label>
    <label for="inp_18">Section 3 field 6:<input type="text" name="inp_18" id="inp_18" /></label>
    </div>
    <div><input class="btn" type="submit" id="send" value="Submit the form" /><input class="btn" type="reset" id="res" value="Reset the form" /></div>
    </form>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles