Highlighting specific inputs

take a look at this fiddle,click edit,click the plus sign so as to add some inputs and hit save.
You will notice that if the inputs are empty a message appears…the code for this is included in the save handler line 61.

The question is if it is easy you think(with the current code) that I highlight also which input is empty-and needs filling so as to inform the user.

I just want to avoid major refactoring if possible.

You can use the browser’s own built-in validation to achieve that.

input:invalid {
  border: 2px solid red;
}
input:valid {
  border: 2px solid green;
}
<form>
    <label for="name">* Name</label>
    <input type="text" id="name" required>
    <input type="submit" value="Submit">
</form>

Try it out at this jsfiddle, to see what happens when you try to submit without filling it out.

the problem with browser validation is the fact that the message that appears is not customizable…besides for other fields in the page I use jquery validation…so browser validation markup is not consistent with the styling of the other fields.

I will look into the code you gave me…but for now I want to try to find a solution with the way the code is currently.
fiddle

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.