Jquery.validate - หนึ่งหน้า - หลายแบบฟอร์ม หนึ่งส่งตกลง ส่วนอื่น ๆ ไม่

ในหน้าของฉัน ฉันมีแบบฟอร์มที่ครบถ้วน 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>

ในจาวาสคริปต์ฉันมีตรรกะต่อไปนี้สำหรับปุ่มส่งแต่ละปุ่ม:

$.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();
    });
});

ส่งงานได้สำหรับแบบฟอร์มแรก และใช้งานไม่ได้กับอีกสองแบบฟอร์ม ฉันได้ตรวจสอบดัชนี html ด้วย DOMLint แล้ว และไม่มีปัญหาใดๆ เหตุการณ์การคลิกถูกทริกเกอร์ แบบฟอร์มถูกต้อง ส่งคืนค่าจริง แต่ไม่ส่ง

การตรวจสอบทำงานอย่างถูกต้อง โดยตรวจสอบเฉพาะแบบฟอร์มที่ส่งมาเท่านั้น

จะใช้กฎที่แตกต่างกันกับแต่ละแบบฟอร์มได้อย่างไร

วิธีแก้ปัญหาที่เป็นไปได้

$.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: {
                ...
            }
        });
    });

การเพิ่มตัวจัดการการส่ง ส่งคืนเหตุการณ์การส่งกลับเข้าสู่การดำเนินการ


forms jquery jquery-validate
person Neara    schedule 04.04.2013    source แหล่งที่มา
comment
คุณมี 3 .click()s? หรือแค่อันนั้น ^ ข้างบน?   -  person dunli    schedule 04.04.2013
comment
คุณสามารถแบ่งปันรหัสให้กับตัวจัดการอื่นได้หรือไม่   -  person Devesh    schedule 04.04.2013
comment
@dunli 3 .click()s ใช่ การถอดพวกมันออกก็ไม่ได้ช่วยอะไรเช่นกัน การลบตัวจัดการการส่งไม่ได้ช่วยเช่นกัน   -  person Neara    schedule 04.04.2013
comment
OP คำพูด: เหตุการณ์คลิกถูกทริกเกอร์ แบบฟอร์มถูกต้อง ส่งคืนค่าจริง แต่ไม่ส่ง ~ คุณเพิ่งอธิบายอย่างชัดเจนว่าตัวเลือก debug:true คืออะไร สมมุติ ที่จะทำ ย้ายมัน. ดูคำตอบของฉันสำหรับคำแนะนำอื่น ๆ   -  person Sparky    schedule 04.04.2013

คำตอบ (4)


arrow_upward
5
arrow_downward

คำพูดตรงข้าม:

เหตุการณ์การคลิกถูกทริกเกอร์ แบบฟอร์มถูกต้อง ส่งคืนค่าจริง แต่ไม่ส่ง

ตัวเลือก debug: true จะบล็อก submit... จริง ๆ นั่นคือสิ่งที่มีไว้สำหรับ ตามเอกสารประกอบ

แก้ไขข้อบกพร่อง:
เปิดใช้งานโหมดแก้ไขข้อบกพร่อง หากเป็นจริง แบบฟอร์มจะ ไม่ได้ส่ง และข้อผิดพลาดบางอย่างจะแสดงบนคอนโซล (ต้องใช้ Firebug หรือ Firebug lite)

โค้ดของคุณทำงานได้อย่างสมบูรณ์เมื่อตัวเลือก debug ถูกลบ: http://jsfiddle.net/9WrSH/1/

คำพูดตรงข้าม:

จะใช้กฎที่แตกต่างกันกับแต่ละแบบฟอร์มได้อย่างไร

เพียงประกาศกฎที่แตกต่างกันของคุณภายในฟังก์ชัน .validate() ของแต่ละแบบฟอร์ม

$('#myform1').validate({
    rules: {
        myfield1: {
            required: true,
            minlength: 3
        },
        myfield2: {
            required: true,
            email: true
        }
    }
});

ดู: http://jsfiddle.net/9WrSH/1/

คุณไม่จำเป็นต้องมีสิ่งเหล่านี้:

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

ปลั๊กอินจับปุ่ม submit และตรวจสอบแบบฟอร์มโดยอัตโนมัติแล้ว ดังนั้นจึงไม่จำเป็นต้องจัดการเหตุการณ์จากภายนอก

คุณไม่จำเป็นต้องมีการตรวจสอบเงื่อนไขหรือ submit() ภายใน submitHandler:

submitHandler: function (form) {
//    if ($(form).valid()) {
//        form.submit();
//    }
}

  • ปลั๊กอินจะเริ่มการทำงานของการเรียกกลับ submitHandler ในแบบฟอร์มที่ถูกต้องเท่านั้น ดังนั้นจึงไม่จำเป็นต้องตรวจสอบความถูกต้อง

  • ปลั๊กอินยังส่งแบบฟอร์มโดยอัตโนมัติเมื่อถูกต้อง ดังนั้นจึงไม่จำเป็นต้องโทร .submit() เลย

สิ่งเหล่านี้มีทั้งซ้ำซ้อนและฟุ่มเฟือย

person Sparky    schedule 04.04.2013
comment
ขอบคุณมากสำหรับคำตอบที่สมบูรณ์และอธิบายได้ดี :) - person Neara; 07.04.2013

arrow_upward
0
arrow_downward

คุณไม่จำเป็นต้องจัดการส่งกิจกรรม แบบฟอร์มจะไม่ส่งหากไม่ถูกต้อง หรือทำเช่นนี้:

//$('#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();
//    });
//});
person karaxuna    schedule 04.04.2013
comment
ฉันย้าย send funcs ทั้งหมดไปนอกเหตุการณ์การคลิกตามที่คุณแนะนำ และมันก็ไม่ได้ผล คนแรกยังคงถูกส่งและคนอื่น ๆ ก็ไม่ส่ง - person Neara; 04.04.2013
comment
และการลบตัวจัดการการส่งทั้งหมดจะมีผลเช่นเดียวกัน น่าเสียดายที่ฉันไม่มีบัญชี jsfiddle และไม่แน่ใจว่าจะใช้งานอย่างไร จะใช้เวลาสองสามวินาทีในการคิดออก ฮ่าๆ - person Neara; 04.04.2013
comment
ไม่จำเป็นต้องสร้างบัญชี เพียงเขียนโค้ด ใส่ jQuery แล้วคลิกบันทึกและเขียน URL ที่นี่ ฉันไม่รีบนะ :)) - person karaxuna; 04.04.2013
comment
ฉันขอโทษ karaxuna ฉันไม่มีเวลาลองใส่โค้ดจริงของฉันลงในซอและทำให้มันทำงาน/แสดงพฤติกรรมที่ฉันได้รับ เป็นแม่แบบที่ยาว รหัสเทียมที่ฉันโพสต์ที่นี่เป็นตัวแทนที่ดีของแนวคิดเกี่ยวกับสิ่งที่ฉันมี มีบางอย่างขัดขวางไม่ให้เหตุการณ์ send เกิดขึ้น IDE ของฉันไม่แสดงข้อผิดพลาดทางไวยากรณ์ใดๆ หน้าเว็บไม่มีข้อผิดพลาด DOMLint ฉันรู้สึกขอบคุณสำหรับความคิดใด ๆ นอกเหนือจากการเล่นซอกับ js fiddle atm ฉันขอโทษอีกครั้ง - person Neara; 04.04.2013
comment
@Neara ฉันเขียนซอแล้ว มันใช้งานได้ ลองดูสิ: jsfiddle.net/MLUwf - person karaxuna; 04.04.2013
comment
ฉันคิดว่าสิ่งที่ทำให้เกิดปัญหาคือเครื่องมือตรวจสอบความถูกต้องหลายตัว jsfiddle.net/neara/MLUwf/1 - person Neara; 04.04.2013
comment
ฉันหวังว่ามันจะเป็นข้อผิดพลาดทางไวยากรณ์! ในโค้ดจริง ฉันไม่มีข้อผิดพลาดทางไวยากรณ์ IDE มั่นใจในสิ่งนั้น แต่จุดบกพร่องอยู่ที่ไหนสักแห่งในไฟล์ js ของฉัน การเอามันออกจะทำให้ปุ่มส่งทำงานได้อย่างถูกต้อง ฉันเพิ่มโค้ด js ของฉันมากขึ้น - person Neara; 04.04.2013
comment
@Neara ดูในหน้าต่างคอนโซลของเบราว์เซอร์ มีข้อผิดพลาดเป็นลายลักษณ์อักษรที่คุณอาจมีในโค้ด - person karaxuna; 04.04.2013

arrow_upward
0
arrow_downward

ทำงาน 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>

ฉันมี 5 แบบฟอร์มในหน้าเดียว

person Irshad Khan    schedule 15.02.2016

arrow_upward
-1
arrow_downward

ฉันทำงานกับแบบฟอร์มหลายรูปแบบ และไม่จำเป็นต้องประกาศแบบฟอร์มทุกช่อง เพียงใช้ใส่ 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();
});

ดู: สาธิต

person Community    schedule 20.12.2013