Question

验证可以使用表单和验证插件作为静态表单。我需要将表单插入页面然后让它验证 - 不适合我。

  $(document).ready(function(){
   var validator = $("#loginForm").validate({
       // rules for field names
       rules: {
            cname: "required", 
            cpass: "required"
    },
    // inline error messages for fields above
    messages: {

            cname: "required", 
            cpass: "required"
    }
}); // for validating the form

$("#loginForm").validate({
  submitHandler: function(form) { //Only runs when valid
      form.submit();
  }
});   

  var htmlStr = '<form class="cmxform" id="loginForm" method="get" action="https://www.myURL.com/login.php"><p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" /></p><p><label for="cpass">Password</label><em>*</em><input type="password" id="cpass" name="pass" size="25" class="required" minlength="2" /></p><input id="mySubmit" class="submit" type="submit" value="Submit"/></form>';

  function createForm(){
  // fires with body onload
  $("#login-container").html(htmlStr);
     };

Answer 1

你需要使用jquery的delegate函数来使它适用于动态元素：）

Answer 2

将html添加到页面后，将验证代码移到右侧。由于$("#loginForm")函数中可能不存在document.ready，因此validate区域中的任何内容都无法运行。您可能希望代码看起来像这样：

function createForm(){
  // fires with body onload
  $("#login-container").html(htmlStr);

  var validator = $("#loginForm").validate({
     // rules for field names
     rules: {
            cname: "required", 
            cpass: "required"
    },
    // inline error messages for fields above
    messages: {
            cname: "required", 
            cpass: "required"
    }
  });  
}

您遇到的其他问题 - 无需在submitHandler中手动提交表单 - 如果表单有效，验证程序将为您执行此操作。此外，通过设置消息对象的方式，实际的错误消息将是“required”。不确定这是不是你想要的......

Answer 3

var htmlStr = '<form class="cmxform" id="loginForm" method="post" action="https://www.myURL.com/login.php"><p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="5" /></p><p><label for="cpass">Password</label><em>*</em><input type="password" id="cpass" name="pass" size="25" class="required" minlength="8" /></p><input id="mySubmit" class="submit" type="submit" value="Submit"/></form>';


function createForm(){
     $("#login-container").html(htmlStr);
     var validator = $("#loginForm").validate({
       });  
 };

 <body onload="createForm()">

<div id="login-container">&nbsp;</div>

Answer 4

我发现以这种方式添加规则对我来说不起作用，可能是因为插入的HTML中概述了规则，而后来使用var validator =（规则）添加规则。这些内联规则工作的唯一方法是，当它们是插入的HTML的一部分时，我可以添加一个函数，就像添加规则一样，但没有添加任何规则。代码如下。表单是动态生成的，动态插入的，规则必须同样动态。这种方法我采取的是正确的，还是这种情况恰好发生了？

  var htmlStr = '<form class="cmxform" id="loginForm" method="post" action="https://www.myURL.com/login.php"><p><label for="cname">Name</label><em>*</em><input id="cname" name="name" size="25" class="required" minlength="5" /></p><p><label for="cpass">Password</label><em>*</em><input type="password" id="cpass" name="pass" size="25" class="required" minlength="8" /></p><input id="mySubmit" class="submit" type="submit" value="Submit"/></form>';

  function createForm(){
   $("#login-container").html(htmlStr);
   var validator = $("#loginForm").validate({
     });  
  };

动态表单验证jquery验证插件

4 个答案: