One field cannot be greater than another field

Hi,

Can I get the CSS code for not allowing one field to be greater than another field? (both field are number valued)

#input_108 must be less than or equal to #input_152

Thank you

Hi Kimberly,

Thanks for reaching out to Jotform Support. Unfortunately, what you're trying to do is not possible with CSS codes. Keep in mind that CSS is only used for the styling of your form and not for the calculation and logic. What we can do is use a Show/Hide field condition that will show a warning message if the first number is greater than the second number. Here's how to do it:

1. Add a Paragraph field that will show a warning message if field 1 is greater than field 2.
   
   
   
2. Add the Show/Hide field condition to show the Warning Text and Hide the Submit button.
   
   

You can check and clone my demo form here.

Give it a try and let us know if you need any help.

Hi,

Thank you for the idea.

I've done it and it works nicely.

Hi FSCAA,

As for your question, I've moved that to a new thread. You can check that out here.

Let us know if there’s anything else we can do for you.

You can achieve this with CSS by using the :invalid and :valid pseudo-classes along with the min and max attributes in HTML. However, CSS alone cannot directly compare two input fields and enforce such validation. You'll need to use JavaScript for that. Here's how you can set up the CSS to style the inputs based on their validity:

html



Copy code

<style> /* Default styling for the inputs */ input[type="number"] { width: 100px; /* Adjust width as needed */ } /* Style inputs when they are valid */ input[type="number"]:valid { border: 1px solid green; /* Green border for valid inputs */ } /* Style inputs when they are invalid */ input[type="number"]:invalid { border: 1px solid red; /* Red border for invalid inputs */ } </style>

However, to enforce the condition where #input_108 must be less than or equal to #input_152, you'll need JavaScript. Here's a basic example using jQuery:

html



Copy code

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $('#input_108, #input_152').on('input', function() { var input108 = parseFloat($('#input_108').val()); var input152 = parseFloat($('#input_152').val()); if (input108 > input152) { $('#input_108').val(''); // Clear input if invalid alert('Input 108 must be less than or equal to Input 152'); } }); }); </script>

Make sure to replace #input_108 and #input_152 with the actual IDs of your input fields. This script will check the values of both input fields whenever they are changed, and if #input_108 is greater than #input_152, it will clear the value of #input_108 and display an alert message.

FOR MORE VISIT US

Wow. Wouldn't it be easier to add a Maximum Age to the properties options in addition to the Minimum Age?