js validation and disappearing text

[SF23103]

Hello all,

 

I have a form that has a number field.  It gets the max and min based on another dropdown selection.  Next to the number field, I have a DIV that also changes to say what the max number is for that field.  Then, I have a validator that will give an error if the person enters a number outside of that range.  Min is always 1, and the max changes based not the other dropdown.

 

It looks like this:

 

[______]  (17 seats available)

 

If there is an error:

[______]  (Sorry, there are {0} seats available. Please select a number of seats between 1 and {0})

 

This is working great, but when someone selects a valid number, then my default text of (17 seats available) goes away.  This normally wouldn't be an issue, but if they decide to change that original dropdown, the default text of available seats for that dropdown doesn't re-appear.

 

I am wondering if I can set that default text to a "valid" response, meaning that if they select a valid number then the (17 seats available) text re-appears.

 

 

Here's my js validation:

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#registration" ).validate({
  rules: {
    availabe_seats: {
      required: true,
      max:parseInt(available_seats)
    }
  }
});


jQuery.extend(jQuery.validator.messages, {
    max: jQuery.validator.format(" <p style=\"color:red;display:inline\"> Sorry, there are {0} seats available.  Please select a number of seats between 1 and {0}.</p>"), // display error message if there are not enough seats available.  This validates number field to avoid manual entries.  if using the up/down dial, it will not let the user select anything above the max anyway.
	
});

jQuery.extend(jQuery.validator.messages, {
    min: jQuery.validator.format(" <p style=\"color:red;display:inline\"> Sorry, you must select at least one seat.</p>"), // display error message if there are not enough seats available.  This validates number field to avoid manual entries.  if using the up/down dial, it will not let the user select anything above the max anyway.

});

Here's my html for where it goes:

<input type="number" min="" max="" step="1"  value="1" name="available_seats" id="available_seats"/> <label for="available_seats" class="error" generated="true"> (<div class="in-line"><div id="display_seats_available">0</div></div> Seats Available)<br /><br /></label>

I also have additional js for the min max for the number input, and that works fine.  The above js is really for the people that manually enter a number instead of using the number up/down button.