So basically I want to display some red text in a website if the content of an input is not what I want the person to put. My input is a number and I want to check that the number is > 15.
I know how to check for that with jquery, but to show the red text I was thinking of having it already in the html with a hidden class and then removing the hidden class when the input is not correct, but it seems a bit dirty ? Is there a better way to make some text appear in that case ?
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
Without knowing what kind of input we're talking about exactly, and with no code provided, it's hard to give an exact answer for your issue. But the pattern attribute on forms should do the trick, when it comes to client-side validation. You can use CSS to customize your current input field, no reason to use jQuery or hidden objects.
From Mozilla:
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
}<form>
<label for="choose">Would you prefer a banana or a cherry?</label>
<input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
<button>Submit</button>
</form>The pattern attributes uses regular expressions, so you should be able to make it validate all kinds of inputs.
EDIT:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
min and max: Specifies the minimum and maximum values of numerical input types
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
}<input type="number" id="choose" name="i_like" min="16">