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

    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
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    May 2006
    Somewhere behind your screen
    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)
    signature under construction

  4. #4
    Join Date
    May 2006
    Somewhere behind your screen

    <!DOCTYPE html>
    <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;}
    div{padding:10px 10px;margin:5px 0px;}
    <script type="text/javascript">
    function doc(id){return document.getElementById(id);}
    function chkFrm(){
    var z=1,reqFields=2,secNum=0,secValid=0;
    var inps=doc('section_'+z).getElementsByTagName('input'),
    for(var k in inps){
    if(inps[k].value !== ''){filled++;}
    doc('section_'+z).style.border=(filled!=reqFields)?'2px dashed Crimson':'none';
    return (secNum==secValid)?true:false;
    doc('mf').onsubmit=function(){return chkFrm();}
    doc('mf').onreset=function(){var n=1;while(doc('section_'+n)){doc('section_'+n).style.border='none';n++;}}
    <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 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 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><input class="btn" type="submit" id="send" value="Submit the form" /><input class="btn" type="reset" id="res" value="Reset the form" /></div>
    signature under construction

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