2

私のページには、3つの完全なフォームがあり、それぞれに独自の送信ボタンがあり、フォームとボタンごとに異なるIDがあります。

<form action="" method="post" class="form-horizontal" id="formA">
   ...
   <button id="formASend" type="submit" class="btn"> Submit</button>
</form>

<form action="" method="post" class="form-horizontal" id="formB">
   ...
   <button id="formBSend" type="submit" class="btn"> Submit</button>
</form>

<form action="" method="post" class="form-horizontal" id="formC">
   ...
   <button id="formCSend" type="submit" class="btn"> Submit</button>
</form>

JavaScriptでは、送信ボタンごとに次のロジックがあります。

$.validator.setDefaults({
        debug:true,
        errorElement: 'span', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input)
        highlight: function (element) { // hightlight error inputs
            $(element).closest('.control-group').addClass('error'); // set error class to the control group
        },

        unhighlight: function (element) { // revert the change dony by hightlight
            $(element)
                .closest('.control-group').removeClass('error'); // set error class to the control group
        }

    });


$(function() {

    var formA = $('#formA');

    // init validator obj and set the rules
    formA.validate({
        rules: {
             ...
        }
    });

    formA.submit(function () {
        return formA.valid();
    });


    var formB = $('#formB');

    // init validator obj and set the rules
    formB.validate({
        rules: {
            ...
        }
    });

    formB.submit(function () {
        return formB.valid();
    });

    var formC = $('#formC');

    // init validator obj and set the rules
    formC.validate({
        rules: {
            ...
        }
    });

    formC.submit(function () {
        return formC.valid();
    });
});

最初のフォームでは問題なく送信できますが、他の 2 つのフォームでは機能しません。DOMLint で html インデックスを確認しましたが、問題はありません。クリックイベントがトリガーされ、フォームが有効になり、送信がtrueを返しますが、送信されません。

検証は適切に機能し、送信されたフォームのみを検証します。

各フォームに異なるルールを適用する方法は?

考えられる解決策

$.validator.setDefaults({
            debug:true,
            errorElement: 'span', //default input error message container
            errorClass: 'help-inline', // default input error message class
            focusInvalid: false, // do not focus the last invalid input)
            highlight: function (element) { // hightlight error inputs
                $(element).closest('.control-group').addClass('error'); // set error class to the control group
            },

            unhighlight: function (element) { // revert the change dony by hightlight
                $(element)
                    .closest('.control-group').removeClass('error'); // set error class to the control group
            },
            submitHandler: function (form) {

               if ($(form).valid()) {
                   form.submit();
               }
            }
        });


    $(function() {

        var formA = $('#formA');

        // init validator obj and set the rules
        formA.validate({
            rules: {
                 ...
            }
        });

        var formB = $('#formB');

        // init validator obj and set the rules
        formB.validate({
            rules: {
                ...
            }
        });

        var formC = $('#formC');

        // init validator obj and set the rules
        formC.validate({
            rules: {
                ...
            }
        });
    });

送信ハンドラーを追加し、送信イベントをアクションに戻します。

4

4 に答える 4

0

submit イベントを処理する必要はありません。有効でない場合、フォームは送信されません。または、次のようにします。

//$('#formASend').click(function () {
    formA.submit(function () {

        return formA.valid();
    });
//});

外側のクリック イベント ハンドラ。これは必要ありません。次$('#formASend').click(function () {}); のようにすることをお勧めします。

var formA = $('#formA');
formA.validate({...});
// no need for these lines:
//$('#formASend').click(function () {
//    formA.submit(function () {

//        return formA.valid();
//    });
//});
于 2013-04-04T09:57:39.537 に答える
0

複数のフォームの検証に 100% 取り組んでいます。

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<script type="text/javascript">
  $(document).ready(function () {
    $("form").submit(function () {

      var clikedForm = $(this); // Select Form

      if (clikedForm.find("[name='mobile_no']").val() == '') {
        alert('Enter Valid mobile number');
        return false;
      }
      if (clikedForm.find("[name='email_id']").val() == '') {
        alert('Enter valid email id');
        return false;
      }

    });
  });
</script>

1 つのページに 5 つのフォームがあります。

于 2016-02-15T05:53:09.810 に答える
-1

私は複数のフォームを扱っており、フォームのすべてのフィールドを宣言する必要はありません。class="required"必要なフィールドを配置するために使用するだけです。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

    <form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formA"</span>><br />
    <input type="text" name="name1" <span style="color: red;">class="required"</span> /><br />
    <button id="formASend" type="submit" class="btn">Submit</button><br />
    </form><br />
    <form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formB"</span>><br />
    <input type="text" name="name2"<span style="color: red;"> class="required"</span> /><br />
    <button id="formBSend" type="submit" class="btn">Submit</button><br />
    </form><br />
    <form action="" method="post" class="form-horizontal"<span style="color: blue;"> id="formC"</span>><br />
    <input type="text" name="name3"<span style="color: red;"> class="required"</span> /><br />
    <button id="formCSend" type="submit" class="btn">Submit</button><br />
</form>

とジャバスクリプト

$(document).ready(function () {
            $.validator.addClassRules('required', {
                required: true
            });
            $('#formA').validate();
            $('#formB').validate();
            $('#formC').validate();
});

参照:デモ

于 2013-12-20T08:39:23.910 に答える