How to do validation and display message before form submit?

How to do validation and display message before form submit?

Hi all,

I have almost no knowledge about JQuery or JavaScript but trying to find what I can do relying on what I can find and learn from net.

I have multiple rows of HTML input elements with type number. Each row has four input fields and I want to add validation so that any input field should not allow a value lesser than the field on it's left side (in the same row).

I want to add this same validation for every row.

I want to do this validation before form submission and display error message. (before form submission/submit button is clicked)

The leftmost row should not allow a value less than zero (as it doesn't have any input field on it's left).

Can you please suggest me how I can do this using the sample jsfiddle at: Error message when text field has a value out of range

(I tried to do this using "min" option in "input" tag but it works only after submit button is clicked.)

Then I was suggested to use JQuery Validation Plugin and that is how I came to know about this option. JQuery Validation plugin

Thank you for your time.