วิธีการทริกเกอร์การตรวจสอบด้วยตนเองด้วย jQuery ตรวจสอบได้อย่างไร


143

ฉันต้องการที่จะตรวจสอบด้วยตนเองทริกเกอร์รวมทั้งแสดงข้อความผิดพลาดกับjQuery ตรวจสอบ

สถานการณ์ที่ฉันพยายามทำให้สำเร็จเป็นรูปแบบนี้:

<form>
 <input id=i1> <button id=b1>
 <input id=i2> <button id=b2>
</form>

เมื่อคลิกb1เท่านั้นi1ควรจะตรวจสอบ เมื่อคลิกb2แล้วi2ควรได้รับการตรวจสอบความถูกต้องเท่านั้น อย่างไรก็ตามจะต้องโพสต์ทุกฟิลด์ ฉันจะทำสิ่งนี้ได้อย่างไร ฉันคิดถึงการจัดการเหตุการณ์คลิกb1/b2และตรวจสอบความถูกต้องของส่วนด้วยตนเอง


ทำไมไม่ตรวจสอบด้วยตนเอง? ปลั๊กอินนี้มีประโยชน์มากสำหรับการตรวจสอบความถูกต้องของแบบฟอร์มทั้งหมด แต่ในกรณีนี้แบบฟอร์มตรวจสอบความถูกต้องที่สามารถตั้งค่าได้ด้วยตนเอง
Anatoliy

แบบฟอร์มใหญ่กว่านั้นในตัวอย่างของฉัน ฉันต้องการมันแบบอัตโนมัติ
usr

คำตอบ:


176

ดูเหมือนว่าห้องสมุดนั้นจะอนุญาตให้มีการตรวจสอบสำหรับองค์ประกอบเดียว เพียงเชื่อมโยงเหตุการณ์คลิกกับปุ่มของคุณและลองทำสิ่งต่อไปนี้:

$("#myform").validate().element("#i1");

ตัวอย่างที่นี่:

https://jqueryvalidation.org/Validator.element


15
สิ่งนี้ตรวจสอบความถูกต้องของฟอร์มทั้งหมด ... เพื่อตรวจสอบความถูกต้องเพียง 1 ฟิลด์วิธีที่ถูกต้องคือ: stackoverflow.com/a/12195091/114029
Leniel Maccaferri

ด้วยเหตุผลใดก็ตามฉันไม่ได้รับข้อความแสดงข้อผิดพลาดที่กำหนดเองเมื่อฉันตรวจสอบด้วยวิธีนี้ อาจมีบางอย่างเกี่ยวกับความจริงที่ว่าฉันกำลังวิ่งอยู่ในกล่องโต้ตอบ Durandal มีปัญหามากมายกับกรอบนี้ในบริบทดังกล่าว
P.Brian.Mackey

@Roberto Aloi: ลิงก์เลิกใช้แล้ว
Sebastian

@ เซบาสเตียนขอบคุณสำหรับ ping อัพเดตลิงค์ทันที!
Roberto Aloi

113

หรืออย่างใดอย่างหนึ่งสามารถใช้: $('#myElem').valid()

if ($('#myElem').valid()){
   // will also trigger unobtrusive validation only for this element if in place 
   // add your extra logic here to execute only when element is valid
}

โปรดทราบว่าvalidate()จะต้องมีการเรียกใช้แบบฟอร์มก่อนที่จะตรวจสอบโดยใช้วิธีนี้

ลิงค์เอกสาร: https://jqueryvalidation.org/valid/


15
validate()จำเป็นต้องเรียกใช้บนแบบฟอร์มก่อนที่จะตรวจสอบโดยใช้วิธีนี้
GETah

ฉันมีคำถามเช่นนี้ถ้า ($ ('# myElem'). val () == '2017-4-12') {การเลือกวันที่ผิด} อื่น {การเลือกที่ถูกต้อง}
srinivas gowda

29

วิธีการของฉันเป็นดังนี้ ตอนนี้ฉันแค่ต้องการให้แบบฟอร์มของฉันได้รับการตรวจสอบเมื่อมีการคลิก / เปลี่ยนช่องทำเครื่องหมายเฉพาะ:

$('#myForm input:checkbox[name=yourChkBxName]').click(
 function(e){
  $("#myForm").valid();
}
)

ข้อความค้นหาของฉันหาก ($ ('# someID) ===' 2017-4-12) {$ ("# myform"). ตรวจสอบความถูกต้อง (). องค์ประกอบ ("# i1"). ถูกต้อง ();} อื่น {$ ( "#myform"). ตรวจสอบความถูกต้อง (). องค์ประกอบ ("# i1"). invalid ();} คือรหัสที่ถูกต้อง
srinivas gowda

14

ตามที่เขียนไว้ในเอกสารวิธีการทริกเกอร์การตรวจสอบแบบฟอร์มโดยทางโปรแกรมคือการเรียกใช้ validator.form ()

var validator = $( "#myform" ).validate();
validator.form();

2
สิ่งนี้ไม่ตอบคำถามเนื่องจากคำถามเกี่ยวกับการตรวจสอบความถูกต้องของเขตข้อมูลเฉพาะ แต่มันคือสิ่งที่ฉันกำลังมองหา ขอบคุณ!
jlh

4

ไม่มีเมธอดที่ไม่มีเอกสารตั้งแต่เวอร์ชัน 1.14

validator.checkForm()

วิธีการนี้จะตรวจสอบความถูกต้องสำหรับการส่งคืนจริง / เท็จ มันไม่ก่อให้เกิดข้อความผิดพลาด


9
undocumented = อาจแตกได้ตลอดเวลา
usr

2

Eva M จากด้านบนเกือบจะมีคำตอบตามที่ได้โพสต์ไว้ด้านบน (ขอบคุณ Eva M!):

var validator = $( "#myform" ).validate();
validator.form();

นี่เกือบจะเป็นคำตอบ แต่มันทำให้เกิดปัญหาแม้ในปลั๊กอินการตรวจสอบ jQuery ที่ทันสมัยที่สุดจนถึงวันที่ 13 ธันวาคม 2018 ปัญหาคือถ้าหนึ่งคัดลอกตัวอย่างนั้นโดยตรงและเคยเรียกว่า ".validate ()" มากกว่าหนึ่งครั้ง การประมวลผลการตรวจสอบการโฟกัส / คีย์อาจเสียหายและการตรวจสอบอาจแสดงข้อผิดพลาดไม่ถูกต้อง

นี่คือวิธีการใช้คำตอบของ Eva M และให้แน่ใจว่าปัญหาโฟกัส / คีย์ / ข้อผิดพลาดการซ่อนไม่เกิดขึ้น:

1) บันทึกตัวตรวจสอบความถูกต้องของคุณไปยังตัวแปร / global

var oValidator = $("#myform").validate();

2) อย่าโทร $ ("# myform") ตรวจสอบความถูกต้อง () เคยอีกครั้ง

หากคุณโทร $ ("# myform") ตรวจสอบ () มากกว่าหนึ่งครั้งอาจทำให้เกิดปัญหาการโฟกัส / คีย์ / ซ่อนข้อผิดพลาด

3) ใช้ตัวแปร / ส่วนกลางและแบบฟอร์มการโทร

var bIsValid = oValidator.form();

1

ในกรณีที่คล้ายกันของฉันฉันมีตรรกะการตรวจสอบของตัวเองและต้องการใช้การตรวจสอบ jQuery เพื่อแสดงข้อความ นี่คือสิ่งที่ฉันทำ

//1) Enable jQuery validation
var validator = $('#myForm').validate();

$('#myButton').click(function(){
  //my own validation logic here
  //.....
  //2) when validation failed, show the error message manually
  validator.showErrors({
    'myField': 'my custom error message'
  });
});


0

ฉันพยายามทำงาน tnx @Anastasiosyal ฉันต้องการแบ่งปันในกระทู้นี้

ฉันไม่แน่ใจว่าฟิลด์อินพุตไม่ได้ทริกเกอร์อย่างไรเมื่อฉันล้างฟิลด์ แต่ฉันสามารถทริกเกอร์แต่ละฟิลด์ที่ต้องการโดยใช้

$(".setting-p input").bind("change", function () {
        //Seven.NetOps.validateSettings(Seven.NetOps.saveSettings);
        /*$.validator.unobtrusive.parse($('#saveForm'));*/
        $('#NodeZoomLevel').valid();
        $('#ZoomLevel').valid();
        $('#CenterLatitude').valid();
        $('#CenterLongitude').valid();
        $('#NodeIconSize').valid();
        $('#SaveDashboard').valid();
        $('#AutoRefresh').valid();
    });

นี่คือมุมมองของฉัน

@using (Html.BeginForm("SaveSettings", "Settings", FormMethod.Post, new {id = "saveForm"}))
{
    <div id="sevenRightBody">
        <div id="mapMenuitemPanel" class="setingsPanelStyle" style="display: block;">
            <div class="defaultpanelTitleStyle">Map Settings</div>
            Customize the map view upon initial navigation to the map view page.
            <p class="setting-p">@Html.LabelFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.NodeZoomLevel) @Html.ValidationMessageFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.ZoomLevel) @Html.ValidationMessageFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLatitude) @Html.ValidationMessageFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLongitude) @Html.ValidationMessageFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.NodeIconSize)</p>
            <p class="setting-p">@Html.SliderSelectFor(x => x.NodeIconSize) @Html.ValidationMessageFor(x => x.NodeIconSize)</p>
        </div>

และเอนทิตีของฉัน

   public class UserSetting : IEquatable<UserSetting>
    {
        [Required(ErrorMessage = "Missing Node Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Node Zoom Level must be between {1} and {2}.")]
        [DefaultValue(100000)]
        [Display(Name = "Node Zoom Level")]
        public double NodeZoomLevel { get; set; }

        [Required(ErrorMessage = "Missing Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Zoom Level must be between {1} and {2}.")]
        [DefaultValue(1000000)]
        [Display(Name = "Zoom Level")]
        public double ZoomLevel { get; set; }

        [Range(-90, 90, ErrorMessage = "Latitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Latitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Latitude")]
        public double CenterLatitude { get; set; }

        [Range(-180, 180, ErrorMessage = "Longitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Longitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Longitude")]
        public double CenterLongitude { get; set; }

        [Display(Name = "Save Dashboard")]
        public bool SaveDashboard { get; set; }
.....
}

3
คำตอบนี้จะถือว่าเป็นสภาพแวดล้อม. Net เมื่อคำถามเกี่ยวข้องกับการตรวจสอบ jQuery อย่างชัดเจน
Kenogu Labz

0

มีวิธีที่ดีถ้าคุณใช้validate()กับพารามิเตอร์ในแบบฟอร์มและต้องการตรวจสอบความถูกต้องหนึ่งฟิลด์ของแบบฟอร์มของคุณด้วยตนเองหลังจากนั้น:

var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));

เอกสารประกอบ: Validator.element ()

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.