2

ここに私の問題があります。

シンプルなフォームとそれを検証するためのいくつかのjavascript（jquery）コードを含むhtmlページがあります。

このページは次のようになります: 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 コードを一緒に操作できますか?

皆さんが私の問題を理解してくれることを願っています。英語の間違いに感謝し、申し訳ありません。

4

1 に答える 1

0

変更が多すぎる場合はご容赦ください。ただし、別の方法を提案できると思います。jquery validateを使用して検証を支援するのはどうですか? これは、必要に応じて ajax-response 検証を行う例です。以下は親ドキュメントです...（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の検証の仕組みです。検証メソッドも表示されます。)

<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>
于 2012-09-25T00:02:24.643 に答える