验证用户使用 jquery 添加的新输入答案

【问题标题】：Validating a new input that has been added by user using jquery验证用户使用 jquery 添加的新输入
【发布时间】：2015-08-21 08:26:27
【问题描述】：

在我的项目中，我对文本框进行了验证，单击时会突出显示边框，然后如果在没有输入任何值的情况下单击了另一个区域，则会弹出警报并突出显示红色。

我还有一个按钮，允许用户使用 jquery 自己添加新的输入框。我想知道是否可以使这些新输入具有与边框突出显示相同的验证，并在使用按钮将它们添加到页面时弹出警报？

编辑

     $(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");
            });
            });

抱歉，以上是我用于已验证文本框的 jquery 代码。焦点类只是将边框变为绿色，而未聚焦则将其变为红色并发出警报。

    <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>");
     });
 });

这是我用来添加文本框的代码

【问题讨论】：

是的，几乎可以肯定。请向我们展示您的尝试。
请先提供示例代码

标签： jquery html css validation

【解决方案1】：

$(document).ready(function(){
  
  $(document).on("focus", ".options", function(){
    
    $(this).addClass("focused");
    $(this).removeClass("unfocused");
    
  });
  
  
  $(document).on("blur", ".options", function(){
    
    $(this).removeClass("focused");
    $(this).addClass("unfocused");
    
    if (!$(this).val()) {
       alert("Please ensure you have answered the question.");
    }
    
 });
  
  
  })

【讨论】：

您好，问题已解决。但是，即使在必填字段中有输入，它也会保持红色，而不是回到没有颜色的状态。
嗨，感谢您的帮助，我已经设法重新排列代码以使其正常工作:)
如果真的解决了你的问题，你可以接受答案

【解决方案2】：

您可以使用依赖于 HTML5 功能的新 jQuery 插件，例如 required，并委托验证事件，使其即使在 AJAX 调用的情况下也能正常工作。在您的 AJAX 响应中，尝试生成如下输入：

<input type="text" required="required" pattern="{d}" />

【讨论】：