Jump to content
Sign in to follow this  
SF23103

js validation and disappearing text

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.