Question

我有一个带有按钮和div（newFormDiv）的html页面，当用户单击该按钮时，它将调用ajax函数在div newFormDiv中编写一个新表单（commentForm）。在新表单中，用户将在artPlaceName中输入内容，长度必须大于1。我尝试使用jquery validataion来做，但从未成功。

任何帮助将不胜感激。

的index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
   <script src="formajax.js"></script>
   <script src="formvalidation.js"></script>

</head>
<body>

<form>
<button>Create New Form</button>
</form>
<div id="newFormDiv">
<p>This is new form area.</p>
</div>
<script>
$( "button" ).click(function () {
testFutureForm();
return false;
});
</script>
</body>
</html>

futureForm.php

<?php
echo '

  <form id="commentForm" method="get" action="">
  <fieldset>
    <p>
      <input id="artPlaceName" name="name" size="25"/>
    </p>
    <p>
      <input id="placeSubmit" class="submit" type="button" value="Submit"/>
    </p>
  </fieldset>
  </form>
';
?>

formajax.js

function testFutureForm()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 )
    {
    document.getElementById("newFormDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","futureForm.php",true);
xmlhttp.send();
}

formvalidation.js

$( "form" ).on( "click", "#placeSubmit",
    function(){$("#commentForm").validate(
               {
                   rules:
                   {
                       artPlaceName:
                           {
                               required: true,
                               minlength: 2
                           }

                   },
       messages:
                   {
           artPlaceName:
                       {
                           required: "<li>Please enter a name.</li>",
                           minlength: "<li>Your name is not long enough.</li>"
                       }
                   }
               }
         );}
         );

Answer 1

通过更好的代码格式化，您的语法错误变得明显......

    $("#commentForm").validate({
       debug: true; // <-- semicolon not allowed here, should be a comma
       rules: {
            artPlaceName: {
                required: true,
                minlength: 2
            }
        },          // <-- see how a comma separates each key/value pair
        messages: {
            artPlaceName: {
                required: "<li>Please enter a name.</li>",
                minlength: "<li>Your name is not long enough.</li>"
            }
        }
    });

;之后的分号debug: true会打破整个事情。将其更改为逗号,。请注意，debug: true也会阻止表单的提交事件。

另外，摆脱你的click处理程序......

$( "form" ).on( "click", "#placeSubmit",

不需要。 jQuery Validate插件会自动捕获提交按钮的click事件。

由于您的表单是动态创建的，因此在将表单加载到页面后立即调用.validate()。把它放在加载新表单的代码之后。

您无需在两个地方声明规则。由于您已在上述required调用中声明了minlength和.validate()规则，因此您不需要内联属性。

<input id="artPlaceName" name="name" size="25" class="required" minlength="2" />

可以简单地写成这样......

<input id="artPlaceName" name="name" size="25" />

无法验证新表单

1 个答案: