0

フォームの検証にはjquery検証（http://bassistance.de/jquery-plugins/jquery-plugin-validation/ ）を使用しました。以下は私のコードの一部です。

HTML：

<form id="formID" action="/processForm" method="post">
  ...
  <input id="name" type="text" name="name" size="10" />
  <input id="username" type="text" name="username" size="10" />
  ...
<input type="submit" value="Submit" />

jQuery：

$("#formID").validate({
  onkeyup:false,

  rules: {
    name: {required: true},
    username: {required: true, checkUsername: true}
    ...
  },
  messages: {
    name: {required: "Must fill"},
    username: {required: "Must fill", checkUsername: "Username unavailable"},
    ...
  }

});

// Check if username exists
$.validator.addMethod('checkUsername', function(username) {
  var postURL = "/checkUsername";
  $.ajax({
    ...
  });
  return ...;
}, '');


// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

奇妙なことに、必須フィールドの一部を空白のままにするか、チェックを外しても、フォームを送信できます。一部の必須フィールドは、空白のままにすると送信できなくなる可能性がありますが、そうでないフィールドもあります。誰かが同じ奇妙な問題に遭遇しましたか？それとも私はここで何か間違ったことをしましたか？

ところで、何も入力せずに送信ボタンをクリックすると、すべての必須フィールドにエラーメッセージが正しく表示されます。ただし、フォームの送信を妨げないものもあります。助けてください。

編集：下部にあるAjaxフォーム送信機能が機能していないようです。どうすれば修正できますか？

4

3 に答える 3

1

要約すると、フォーム検証とajax送信の両方を使用するには、validate（）関数に「submitHandler」を追加します。

$("#formID").validate({
  onkeyup:false,

  rules: {
    ...
  },

  messages: {
    ...
  },

  // Submit the form
  submitHandler: function(form) {
    theUrl = '/processData';
    var params = $(form).serialize();
    $.ajax ({
      type: "POST",
      url: theUrl,
      data: params,
      processData: false,
      async: false,
      success: function(returnData) {
        $('#content').html(returnData);
      }
    });
  }

});
于 2013-01-16T04:28:01.007 に答える
1

私は同じ問題を抱えていました、私がしたことは：
1）送信ボタンを変更する：
から：

<input type="submit" class="savebutton" id="save" value="Save" />

to

 <input type="button" class="savebutton" id="save" value="Save" />  

(the save button is not going to submit the form when is click it).

2）検証スクリプトを次のように変更します。

<script type="text/javascript">
 $(document).ready(function() {
   $('#form').validate({ 
     rules: {
         qty: {
    max: 100,
            required: true
         }
    },
    messages: {
        qty: "please check quantity",
    }
});

 $( "#save" ).click(function() {
if ($('#form').validate())$('#form').submit();
 });
});
</script>

「保存」ボタンを押すと、フォームが検証されます。検証が正しければ、フォームを送信します。

于 2013-12-18T23:35:44.647 に答える
0

それ以外の：

// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

次のように、 ValidateプラグインのsubmitHandlerオプションを使用します。

$("#formID").validate({
    //all your other options
    submitHandler: function(form) {
      $(form).ajaxForm({
        success: function(returnData) {
          $('#content').html(returnData);
        }
      });
    }
 });
于 2013-01-14T16:37:47.590 に答える