1

验证与表单和验证插件作为静态表单一起工作。我需要将表单插入页面，然后对其进行验证 - 不适合我。

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

4 回答 4

0

您需要使用delegatejquery 的功能使其与动态元素一起使用:)

于 2012-07-11T21:39:02.817 回答
0

将 html 添加到页面后，将验证代码移至右侧。由于您的函数$("#loginForm")中可能不存在，因此该区域中的任何内容都不会运行。您可能希望您的代码如下所示：document.readyvalidate

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- 如果表单有效，验证器将为您执行此操作。此外，根据您设置消息对象的方式，实际的错误消息将是“必需”一词。不确定这是不是你想要的......

于 2012-07-11T22:42:31.297 回答
0 
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>
于 2012-07-12T00:53:20.227 回答
0

我发现以这种方式添加规则对我不起作用，可能是因为在插入的 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({
     });  
  };
于 2012-07-19T21:05:22.903 回答