Within my current project, I have implemented validation features for text boxes. When a user clicks on a text box, the border is highlighted. If they click elsewhere without entering any value, the border turns red and an alert pop-up appears.
In addition, there is a button that allows users to add new input boxes by using jQuery. I am interested in finding a way to apply the same validation to these newly added inputs, highlighting the border and displaying a pop-up alert when they are created using the button.
EDIT
$(function() {
$(".options").focus(function(){
$(this).addClass("focused");
});
});
$(function() {
$(".options").blur(function(){
$(this).removeClass("focused");
});
});
$(function() {
$(".options").focusout(function () {
$(this).addClass("unfocused");
if (!$(this).val()) {
alert("Please ensure you have answered the question.");
}
});
});
$(function() {
$(".options").blur(function(){
$(this).removeClass("unfocused");
});
});
I have provided the jQuery code above that I used for validating the existing text boxes. The "focused" class turns the border green, while the "unfocused" class turns it red with an alert message.
<div class="addtextbox"><input type="submit" class="AddOption" value="Click To Add New Option"></div>
$(function() {
$(".addtextbox").click(function() {
$(".addtextbox").before("<input class='options'><br>");
});
});
The code snippet above demonstrates how the textbox can be added through a button click event.