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 6 of 6
  1. #1
    Regular Coder Jesper Møller's Avatar
    Join Date
    Jun 2006
    Location
    Denmark, Copenhagen
    Posts
    138
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Input Validation of numbers field

    Im making af form where i need to check if a feild is corectly fild out with 8 digits

    I already have some filds tha works as i want them to
    Code:
    	<td class="antal"><input type="text" class="mad1" id="" name="" name="Marineret sild " value="0" onfocus="this.value=''" /></td>
    The field can only be numbers and max 25
    Code:
    			$(".antal input").jStepper({minValue:0, maxValue:25, minLength:1});
    To check the feild i use
    Code:
    	$(".mad1").each(function() {
    		if (this.value.trim().length != 0 && !isNaN(this.value.trim()) ) {
    		//Set max to 25
    			if (this.value >= 25){
    				this.value= 25
    				}
    		// Calculate numbers
    			if($(this).is('.mad1')){
    				antalf += parseFloat(this.value);
    				}
    				antal += parseFloat(this.value);
    				$(this).css("background-color", "#ffffff");
    		}
    		else if (this.value.length != 0 || this.value.length == 0 ){
    			$(this).css("background-color", "#e89898");
    		}
    Making the input field 25 if the input is more than 25 or empty and red if the input field is letters.

    Now i need a phone number feild validation (min/max 8 numbers) working the same way
    But i cant get it to work

    This is what i have tryde

    Code:
    		<input type="text" id="" name="tlf" value="00000000"  onfocus="this.value=''" style="width: 215px;" />
    Code:
    		// Numbers only feilds max 99999999
    			$(".telefon input").jStepper({minValue:0, maxValue:99999999, minLength:1});
    Code:
    			$(".telefon input").change(function() {
    				if (this.value.trim().length != 0 && !isNaN(this.value.trim()) ) {
    				if (this.value == 0){
    				$(this).css("background-color", "#ffffff");
    					}
    				}
    				else if (this.value.length != 0 || this.value.length == 0 || this.value.length <= 8 ){
    				$(this).css("background-color", "#e89898");
    					}
    			}
    			});
    But cant get i to work
    What am i doing wrong ??

    The page in qeusetion http://www.gordions.dk/bestilling.html
    Last edited by Jesper Møller; 04-21-2014 at 04:21 PM.
    "True knowledge exists in knowing that you know nothing."

    "Education is learning what you didn't even know you didn't know!"

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,095
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Maybe a different approach.
    In the back of my head I get the feeling the .change is for dropdowns. So used .on to get the contents of the input field.
    I normally just wont let people enter numbers in a alpha field or alphas in a numeric field so I restrict em.
    And if they don't have enough numbers, I leave that for the form validation.
    Here's my crack at a solution, leaving validation and shortness to you:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Simple Login Form</title>
    </head>
    
    <body>
    <tr class="telefon">
    	<td colspan="4">&nbsp;&nbsp;&nbsp;Telefon nummer:
    		<input id="tlf" name="tlf" value="00000000"  onfocus="this.value=''" style="width: 215px;" type="text">
    	</td>
    </tr>
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    $("#tlf").on('input', function() {
    	if (isNaN($("#tlf").val()) ) {
    		$('#tlf').val($('#tlf').val().slice(0,-1));
    	}
    	if ($('#tlf').val().length == 9 ){
    		$('#tlf').val($('#tlf').val().slice(0,-1));
    		$(this).css("background-color", "#e89898");
    	}
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,038
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by sunfighter View Post
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Simple Login Form</title>
    </head>
    
    <body>
    <tr class="telefon">
    	<td colspan="4">***Telefon nummer:
    		<input id="tlf" name="tlf" value="00000000"  onfocus="this.value=''" style="width: 215px;" type="text">
    	</td>
    </tr>
    
    <script type='text/javascript' src='javascript/jquery.js'></script>
    <script type="text/javascript">
    $("#tlf").on('input', function() {
    	if (isNaN($("#tlf").val()) ) {
    		$('#tlf').val($('#tlf').val().slice(0,-1));
    	}
    	if ($('#tlf').val().length == 9 ){
    		$('#tlf').val($('#tlf').val().slice(0,-1));
    		$(this).css("background-color", "#e89898");
    	}
    });
    </script>
    </body>
    </html>
    Why don't you use this inside the input event handler to reference the tlf field? You're doing lookups 6 times on every keystrokes to find the tlf when the this context is the tlf itself.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,095
    Thanks
    23
    Thanked 594 Times in 593 Posts
    glenngv, if you mean this:
    Code:
    <script type="text/javascript">
    $("#tlf").on('input', function() {
    	if (isNaN($(this).val()) ) {
    		$(this).val($(this).val().slice(0,-1));
    	}
    	if ($('#tlf').val().length == 9 ){
    		$(this).val($(this).val().slice(0,-1));
    		$(this).css("background-color", "#e89898");
    	}
    });
    </script>
    It's because I didn't think of it. Thanks
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Regular Coder Jesper Møller's Avatar
    Join Date
    Jun 2006
    Location
    Denmark, Copenhagen
    Posts
    138
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I normally just wont let people enter numbers in a alpha field or alphas in a numeric field so I restrict em.
    And if they don't have enough numbers, I leave that for the form validation.
    Thanks ill try playing with that
    All my other fields work with validation on input and i want this field to do the same,
    but your sugestion gives me something to work with
    "True knowledge exists in knowing that you know nothing."

    "Education is learning what you didn't even know you didn't know!"

  • #6
    Regular Coder Jesper Møller's Avatar
    Join Date
    Jun 2006
    Location
    Denmark, Copenhagen
    Posts
    138
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks glenngv that looks usefull
    "True knowledge exists in knowing that you know nothing."

    "Education is learning what you didn't even know you didn't know!"


  •  

    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
    •