验证从 ajax 加载的表单答案

【问题标题】：Validate a form loaded from ajax验证从 ajax 加载的表单
【发布时间】：2011-11-24 12:48:56
【问题描述】：

这是我的问题。

我有一个带有简单表单的 html 页面和一些 javascript (jquery) 代码来验证它，那么好吧。

这个页面看起来像这样：test.html

<html>
<head>
<title></title>
<script  src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">

function validate(){
    $('form').submit(function () {
        var txt = $('#SYSTEM_NAME').val();
        if (txt == '') $('#loading').append('field is empty');
        return false;
    })

}

window.onload = validate

<form action="SomeAction" id="form0" method="post">

    <fieldset>
        <legend>Information</legend>

        <div class="editor-field">
            <input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
        </div>

        <input type="submit" value="Insert" id="saveCreation" />
        <div id="loading"></div>

    </fieldset>

</form>

</body> 
</html>

在上面的这个页面中，如果您尝试在“SYSTEM_NAME”字段中没有任何信息的情况下插入，则会显示错误消息。一切都很好，我的表单已经过验证。

但是当我使用 ajax(jquery) 从另一个页面加载这个页面时，会发生什么，在加载它之后，我在“test.html”上所做的验证确实有效。

例子：

<html>
<head>
<title></title>
<script  src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$('#go').click(function(){
    $('#here').load('test.html')
}); 
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>

现在，如果我点击“插入”，验证将不再起作用。

我该如何解决这个问题？我可以与加载的页面和 javascript 代码一起交互吗？

希望你们理解我的问题。感谢并为英语错误感到抱歉。

【问题讨论】：

标签： ajax forms validation loaded

【解决方案1】：

如果这变化太大，请原谅我，但我想我可能会为您推荐另一种方法。使用jquery validate 来帮助您进行验证怎么样？这是一个根据需要验证 ajax 响应的示例。下面是父文档...（请注意，我在头部包含 jquery validate。只需忽略我用来加载部分的“get_test”。）

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
  <script type="text/javascript">

    $(document).ready(function() {

      $('#go').click(function() {
        $('#here').load('get_test');
      });

    }); 

  </script>

</head>
<body>

<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>

以及我在下面加载的部分...（请注意，文本输入有一个“必需”类 - 这就是 jquery validate 的工作方式。您还将看到一个 validate 方法。）

<script type="text/javascript">
  $("#form0").validate();
</script>

<form action="SomeAction" id="form0" method="post">

    <fieldset>
        <legend>Information</legend>

        <div class="editor-field">
            <input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
        </div>

        <input type="submit" value="Insert" id="saveCreation" />
        <div id="loading"></div>

    </fieldset>

</form>

【讨论】：