Highlighting specific inputs


#1

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.


#2

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.


#3

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.


#4

#5

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


#6

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