ฉันใช้ jQuery Validate Plugin ที่ยอดเยี่ยมเพื่อตรวจสอบบางรูปแบบ ในรูปแบบหนึ่งฉันต้องตรวจสอบให้แน่ใจว่าผู้ใช้กรอกข้อมูลในกลุ่มฟิลด์อย่างน้อยหนึ่งกลุ่ม ฉันคิดว่าฉันมีทางออกที่ดีทีเดียวและอยากจะแบ่งปัน โปรดแนะนำการปรับปรุงที่คุณคิดได้
ฉันค้นหาวิธีการตรวจสอบความถูกต้องแบบกำหนดเองของ Rebecca Murpheyซึ่งมีประโยชน์มาก
ฉันปรับปรุงสิ่งนี้ในสามวิธี:
- เพื่อให้คุณผ่านตัวเลือกสำหรับกลุ่มเขตข้อมูล
- เพื่อให้คุณระบุจำนวนกลุ่มที่ต้องกรอกเพื่อตรวจสอบความถูกต้องจึงจะผ่านได้
- เพื่อแสดงอินพุตทั้งหมดในกลุ่มว่าผ่านการตรวจสอบความถูกต้องทันทีที่หนึ่งในนั้นผ่านการตรวจสอบความถูกต้อง (ดูการตะโกนถึงNick Craverในตอนท้าย)
ดังนั้นคุณสามารถพูดได้ว่า"อย่างน้อยต้องใส่ X อินพุตที่ตรงกับตัวเลือก Y"
ผลลัพธ์สุดท้ายด้วยมาร์กอัปดังนี้:
<input class="productinfo" name="partnumber">
<input class="productinfo" name="description">
... เป็นกลุ่มของกฎดังนี้:
// Both these inputs input will validate if
// at least 1 input with class 'productinfo' is filled
partnumber: {
require_from_group: [1,".productinfo"]
}
description: {
require_from_group: [1,".productinfo"]
}
รายการ # 3 ถือว่าคุณกำลังเพิ่มคลาสใน.checkedข้อความแสดงข้อผิดพลาดของคุณเมื่อตรวจสอบความถูกต้องสำเร็จ คุณสามารถทำได้ดังต่อไปนี้แสดงให้เห็นที่นี่
success: function(label) {
label.html(" ").addClass("checked");
}
เช่นเดียวกับในการสาธิตที่เชื่อมโยงด้านบนฉันใช้ CSS เพื่อให้span.errorภาพ X แต่ละภาพเป็นพื้นหลังเว้นแต่จะมีคลาส.checkedซึ่งในกรณีนี้จะได้รับภาพเครื่องหมายถูก
นี่คือรหัสของฉันจนถึงตอนนี้:
jQuery.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
//Look for our selector within the parent form
var validOrNot = $(selector, element.form).filter(function() {
// Each field is kept if it has a value
return $(this).val();
// Set to true if there are enough, else to false
}).length >= numberRequired;
// The elegent part - this element needs to check the others that match the
// selector, but we don't want to set off a feedback loop where each element
// has to check each other element. It would be like:
// Element 1: "I might be valid if you're valid. Are you?"
// Element 2: "Let's see. I might be valid if YOU'RE valid. Are you?"
// Element 1: "Let's see. I might be valid if YOU'RE valid. Are you?"
// ...etc, until we get a "too much recursion" error.
//
// So instead we
// 1) Flag all matching elements as 'currently being validated'
// using jQuery's .data()
// 2) Re-run validation on each of them. Since the others are now
// flagged as being in the process, they will skip this section,
// and therefore won't turn around and validate everything else
// 3) Once that's done, we remove the 'currently being validated' flag
// from all the elements
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
// .valid() means "validate using all applicable rules" (which
// includes this one)
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
// {0} below is the 0th item in the options field
}, jQuery.format("Please fill out at least {0} of these fields."));
ไชโย!
ตะโกนออกไป
ตอนนี้สำหรับการตะโกนนั้น - แต่เดิมรหัสของฉันเพียงแค่ซ่อนข้อความแสดงข้อผิดพลาดในช่องที่ตรงกันอื่น ๆ แบบสุ่มสี่สุ่มห้าแทนที่จะตรวจสอบความถูกต้องอีกครั้งซึ่งหมายความว่าหากมีปัญหาอื่น (เช่น 'อนุญาตเฉพาะตัวเลขและคุณป้อนตัวอักษร') มันถูกซ่อนไว้จนกว่าผู้ใช้จะพยายามส่ง นี่เป็นเพราะฉันไม่รู้วิธีหลีกเลี่ยงการวนรอบข้อเสนอแนะที่กล่าวถึงในความคิดเห็นด้านบน ฉันรู้ว่าต้องมีวิธีดังนั้นฉันจึงถามคำถามและNick Craverก็ให้ความกระจ่างแก่ฉัน ขอบคุณนิค!
แก้ไขคำถามแล้ว
เดิมเป็นคำถามประเภท "ขอฉันแชร์และดูว่ามีใครแนะนำการปรับปรุงได้บ้าง" แม้ว่าฉันจะยังคงยินดีรับฟังความคิดเห็น แต่ฉันคิดว่ามันค่อนข้างสมบูรณ์ในตอนนี้ (อาจจะสั้นกว่านี้ก็ได้ แต่ฉันอยากให้อ่านง่ายและไม่จำเป็นต้องกระชับ) แค่นั้นแหละ!
อัปเดต - ตอนนี้เป็นส่วนหนึ่งของการตรวจสอบ jQuery
สิ่งนี้ถูกเพิ่มอย่างเป็นทางการในการตรวจสอบความถูกต้อง jQueryเมื่อวันที่ 4/3/2012