html form javascript validation: checking multiple fields entered is equal to or less than

[james909]

hi, i am hoping someone here can help me with this javascript coding, on a html5 send form, i have been searching and googling to no luck in finding a way or the coding to do this.

 

i am trying to find the javascript to validate whether 4 client entered numeric fields are equal to or less than a number (between 0 and 12), all other entered values and letters etc i want to throw up an error message asking to re-enter.

 

here is my html form, and the inputs:

<form name="htmlform" enctype="multipart/form-data" method="post" action="base_submit_form.php" onsubmit="return validateForm(this);"
 onreset="return confirm('Are you sure that you want to reset this form?');">

<label for="submit_username">Username (max length 15): </label>
<input  type="text" name="submit_username" maxlength="15" size="30" required><br />
<br />
Number of Each Rooms:<br />
<input  type="number" name="livingrooms" min="0" max="10" maxlength="2" size="1">Living Rooms<br />
<input  type="number" name="diningrooms" min="0" max="10" maxlength="2" size="1">Dining Rooms<br />
<input  type="number" name="kitchens" min="0" max="10" maxlength="2" size="1">Kitchens<br />
<input  type="number" name="beedrooms" min="0" max="10" maxlength="2" size="1">Bedrooms<br />

<input type="submit" value="Submit">  <input type="reset" value="Reset!">
</form>

here is the current javascript for verifying a username has been entered:

<script defer type="text/javascript">
function validateForm(formElement)
{
	if( document.htmlform.submit_username.value == "" )
   {
     alert( "Please Enter a Username." );
     document.htmlform.submit_username.focus() ;
     return false;
   }
}

how to i code the javascript validation to check the total numbers of living rooms, dining rooms, kitchens, bedrooms is a number between 0 and 12? adding all the different rooms together, ie. 1 living rooms, 3 dining rooms, 2 kitchens, 4 bedrooms (total 10 is fine), but 3 living rooms, 3 dining rooms, 5 kitchens, 4 bedrooms, will put up the error popup?

Edited May 11, 2013 by james909

[.josh]

<form name="htmlform" enctype="multipart/form-data" method="post" action="base_submit_form.php" onsubmit="return validateForm(this);"
 onreset="return confirm('Are you sure that you want to reset this form?');">


<label for="submit_username">Username (max length 15): </label>
<input  type="text" name="submit_username" maxlength="15" size="30"><br />
<br />
Number of Each Rooms:<br />
<input  type="number" name="livingrooms" min="0" max="10" maxlength="2" size="1">Living Rooms<br />
<input  type="number" name="diningrooms" min="0" max="10" maxlength="2" size="1">Dining Rooms<br />
<input  type="number" name="kitchens" min="0" max="10" maxlength="2" size="1">Kitchens<br />
<input  type="number" name="bedrooms" min="0" max="10" maxlength="2" size="1">Bedrooms<br />


<input type="submit" value="Submit">  <input type="reset" value="Reset!">
</form>
<script type='text/javascript'>
function validateForm(formElement) {
  /* validate username */
  var username = formElement.elements['submit_username'];
  if( username.value == "" ) {
    alert( "Please Enter a Username." );
    username.focus();
    return false;
  }
  /* validate number of rooms */
  var rooms = ['livingrooms','diningrooms','kitchens','bedrooms']; 
  var roomElements = formElement.elements;
  var total = 0;
  for (var r=0,rl=rooms.length;r<rl;r++) {
    total += +roomElements[rooms[r]].value;
  }
  if (total>=0 && total<=12) {
    return true;
  } else {
    alert('Total amount of rooms must be between 0 and 12'); 
    return false;
  }
}
</script>

 

 

Some notes about the code you already had:

• You misspelled your bedrooms input field (you had 'beedrooms' not 'bedrooms').  Well I assume that's a typo so I changed it
• You were passing a reference this to your function but weren't actually making use of it, so I altered your username logic to use it
• Your username input field had a required attribute in it.  This is a built-in way to make sure the input field is not empty and is fine..except that you turn around and attempt to validate it in your function.  Well when you have both, your custom error msg alert will never execute, because the required attribute will be evaluated first.  So the only way it will even make it to your function is if it's already filled out, so your condition for username will never evaluate true.  So to make a long story short, pick one or the other.  I updated the code to remove the required attribute under the assumption that you wanted a custom validation and error msg.