www.webdeveloper.com
Results 1 to 7 of 7

Thread: Complex Form Validation

  1. #1
    Join Date
    Apr 2009
    Posts
    346

    Complex Form Validation

    I have a form input which needs to validate whether someone inputs a number that when divided by 10 will equal a whole number. In other words, the quantity can only be ordered in increments of 10. The validation needs to check immediately after they type in the number and go onto a new field.

    Example:

    HTML Code:
    Enter Quantity 1: <input type="text" name="product['design1']['red']" />
    Enter Quantity 2: <input type="text" name="product['design2']['red']" />
    Enter Quantity 3: <input type="text" name="product['design3']['red']" />
    If the alert could be displayed next to the appropriate form field that would be the best.

    Anyone know how this can be achieved?

  2. #2
    Join Date
    Mar 2011
    Posts
    65
    You could put an onchange event handler on the input element which divides the number by 10. Then use modulus to check the remainder. If the remainder = 0 then the input number is an exact multiple of 10. Should be no more than a couple of lines of code.

  3. #3
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    As a side note, I believe that the members of the arrays you're submitting don't require quotes around them:

    HTML Code:
    Enter Quantity 1: <input type="text" name="product[design1][red]" />
    Enter Quantity 2: <input type="text" name="product[design2][red]" />
    Enter Quantity 3: <input type="text" name="product[design3][red]" />
    Last edited by bionoid; 12-16-2011 at 05:44 PM. Reason: My previous statement was incorrect.

  4. #4
    Join Date
    Nov 2010
    Posts
    978
    being that your text box names are dynamically produced, you might have trouble lining them up with the div ids, but a simple version would go something like this (apologies for the shonky css):
    Code:
    <html>
    <head>
    <style>
    .field{
    float:left;
    }
    .clear{
    clear:both;
    }
    </style>
    </head>
    <body>
    <div class="field">Enter Quantity 1: <input type="text" name="red" /></div><div class="field" id="reddiv"></div><div class="clear"></div>
    <div class="field">Enter Quantity 2: <input type="text" name="blue" /></div><div class="field" id="bluediv"></div><div class="clear"></div>
    <div class="field">Enter Quantity 3: <input type="text" name="green" /></div><div class="field" id="greendiv"></div>
    <script type="text/javascript">
    
    els=document.getElementsByTagName("input")
    for (var i = 0; i < els.length; i++) {
    if (els[i].type=="text"){
    	els[i].onblur=function(){checkVal(this)}
    	}
    }
    
    function checkVal(box){
    if (box.value&#37;10!=0){
    document.getElementById(box.name+"div").innerHTML="Not a multiple of 10"
    	} else {
    document.getElementById(box.name+"div").innerHTML=""
    	}
    }
    
    			</script> 
    
    </body>
    </html>

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,253
    Try this &#171;Quantity Picker&#187; which works too without mouse (with tabs and Enter). A relatively simple variant consists in specifying that commands are made by tens...
    Last edited by 007Julien; 12-17-2011 at 05:59 AM.

  6. #6
    Join Date
    Nov 2010
    Posts
    978
    ... or being that they have to be 10s you can just convert them to 10s as they go...

    Code:
    <html>
    <head>
    
    </head>
    <body>
    Enter Quantity 1: <input type="text" name="red" />
    Enter Quantity 2: <input type="text" name="blue" />
    Enter Quantity 3: <input type="text" name="green" />
    <script type="text/javascript">
    
    els=document.getElementsByTagName("input")
    for (var i = 0; i < els.length; i++) {
    if (els[i].type=="text"){
    	els[i].onblur=function(){this.value=checkVal(this.value)}
    	}
    }
    
    function checkVal(box){
    val=box.replace(/[0-9]$/,0)
    return(val);
    }
    
    			</script> 
    
    </body>
    </html>

  7. #7
    Join Date
    Nov 2010
    Posts
    978
    ... or if you wanted to round up or down to the nearest 10...

    Code:
    <html>
    <head>
    
    </head>
    <body>
    Enter Quantity 1: <input type="text" name="red" />
    Enter Quantity 2: <input type="text" name="blue" />
    Enter Quantity 3: <input type="text" name="green" />
    <script type="text/javascript">
    
    els=document.getElementsByTagName("input")
    for (var i = 0; i < els.length; i++) {
    if (els[i].type=="text"){
    	els[i].onblur=function(){this.value=checkVal(this.value)}
    	}
    }
    
    function checkVal(box){
    return Math.round(box*0.1)/0.1;
    }
    
    
    			</script> 
    
    </body>
    </html>
    or if you wanted to be sneaky and only round up...

    Code:
    <html>
    <head>
    
    </head>
    <body>
    Enter Quantity 1: <input type="text" name="red" />
    Enter Quantity 2: <input type="text" name="blue" />
    Enter Quantity 3: <input type="text" name="green" />
    <script type="text/javascript">
    
    els=document.getElementsByTagName("input")
    for (var i = 0; i < els.length; i++) {
    if (els[i].type=="text"){
    	els[i].onblur=function(){this.value=checkVal(this.value)}
    	}
    }
    
    function checkVal(box){
    while (box&#37;10!=0) {
    box++
    }
    return(box);
    }
    
    
    			</script> 
    
    </body>
    </html>
    Last edited by xelawho; 12-18-2011 at 05:38 PM.

Thread Information

Users Browsing this Thread

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

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