Question

在我的项目中，我对文本框进行了验证，在单击时突出显示边框，然后突出显示红色，如果单击其他区域而没有输入任何值，则会弹出警告。

我还有一个按钮，允许用户使用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>");
     });
 });

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

Answer 1

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

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

Answer 2

＆＃13;

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

＆＃13;

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

2 个答案: