forms - चेकबॉक्स के समूह के लिए HTML5 "आवश्यक" विशेषता का उपयोग करना?




validation checkbox (6)

HTML5 का समर्थन करने वाले नए ब्राउज़र का उपयोग करते समय (उदाहरण के लिए फ़ायरफ़ॉक्स 4);
और एक फॉर्म फ़ील्ड में required='required' विशेषता required='required' ;
और फॉर्म फ़ील्ड खाली / खाली है;
और सबमिट बटन क्लिक किया गया है;
ब्राउज़र पता लगाता है कि "आवश्यक" फ़ील्ड खाली है और फॉर्म सबमिट नहीं करता है;
इसके बजाए ब्राउज़र एक संकेत दिखाता है कि उपयोगकर्ता को फ़ील्ड में टेक्स्ट टाइप करने के लिए कहा जाता है।

अब, एक पाठ फ़ील्ड के बजाय, मेरे पास चेकबॉक्स का समूह है , जिनमें से कम से कम एक को उपयोगकर्ता द्वारा चेक / चयनित किया जाना चाहिए।

मैं चेकबॉक्स के इस समूह पर HTML5 required विशेषता का उपयोग कैसे कर सकता हूं? (चूंकि केवल चेकबॉक्स में से एक को जांचना आवश्यक है, इसलिए मैं प्रत्येक चेकबॉक्स पर required विशेषता नहीं डाल सकता)

ps। यदि मैं मायने रखता simple_form , तो मैं simple_form का उपयोग कर रहा हूं।

अद्यतन करें

क्या एचटीएमएल 5 multiple विशेषता यहां उपयोगी हो सकती है? क्या किसी ने मेरे प्रश्न के समान कुछ करने के लिए पहले इसका इस्तेमाल किया है?

अद्यतन करें

ऐसा प्रतीत होता है कि यह सुविधा HTML5 spec द्वारा समर्थित नहीं है: ISSUE-111: इनपुट क्या करता है @ @type = checkbox के लिए आवश्यक है?

(समस्या की स्थिति: समस्या को पूर्वाग्रह के बिना बंद कर दिया गया है। ) और यहां स्पष्टीकरण है

अद्यतन 2

यह एक पुराना सवाल है, लेकिन यह स्पष्ट करना चाहता था कि प्रश्न का मूल उद्देश्य जावास्क्रिप्ट का उपयोग किए बिना उपर्युक्त करने में सक्षम होना था - यानी इसे करने का HTML5 तरीका उपयोग करना। पीछे की ओर, मुझे "जावास्क्रिप्ट के बिना" अधिक obivous बनाया जाना चाहिए था।


@thegauraw और @Brian वुडवर्ड के उत्तरों से प्रेरित, यहां एक छोटा सा सत्यापन है जो मैंने एक कस्टम सत्यापन त्रुटि संदेश सहित JQuery उपयोगकर्ताओं के लिए एक साथ खींचा है:

$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function() {
    if ($cbx_group.is(":checked")) {
        // checkboxes become unrequired as long as one is checked
        $cbx_group.prop("required", false).each(function() {
            this.setCustomValidity("");
        });
    } else {
        // require checkboxes and set custom validation error message
        $cbx_group.prop("required", true).each(function() {
            this.setCustomValidity("Please select at least one checkbox.");
        });
    }
});

ध्यान दें कि मेरे फॉर्म में डिफ़ॉल्ट रूप से चेक किए गए कुछ चेकबॉक्स हैं।

हो सकता है कि आप में से कुछ जावास्क्रिप्ट / JQuery जादूगर इसे और भी कस कर सकते हैं?


Jquery का उपयोग कर एक और आसान चाल है !!

एचटीएमएल

<form id="hobbieform">
        <div>
            <input type="checkbox" name="hobbies[]">Coding
            <input type="checkbox" name="hobbies[]">Gaming
            <input type="checkbox" name="hobbies[]">Driving
        </div>
</form>


JQuery

$('#hobbieform').on("submit", function (e) {
    var arr = $(this).serialize().toString();
    if(arr.indexOf("hobbies") < 0){
        e.preventDefault();
        alert("You must select at least one hobbie");
    }
});

यह सब कुछ है .. यह काम करता है क्योंकि यदि कोई भी चेकबॉक्स चयनित नहीं है, तो चेकबॉक्स समूह (इसके नाम सहित) के संबंध में कुछ भी सर्वर पर पोस्ट नहीं किया गया है


दुर्भाग्यवश एचटीएमएल 5 ऐसा करने के लिए एक आउट-द-द-बॉक्स तरीका प्रदान नहीं करता है।

हालांकि, jQuery का उपयोग करके, यदि चेकबॉक्स समूह में कम-से-कम एक चेक तत्व है तो आप आसानी से नियंत्रण कर सकते हैं।

निम्नलिखित डोम स्निपेट पर विचार करें:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

आप इस अभिव्यक्ति का उपयोग कर सकते हैं:

$('div.checkbox-group.required :checkbox:checked').length > 0

जो कम से कम एक तत्व की जांच की जाती true तो true लौटता है। उस पर आधारित, आप अपनी सत्यापन जांच लागू कर सकते हैं।


मुझे एक ही समस्या थी और मैं अपना समाधान यह था:

HTML:

<form id="processForm.php" action="post">
  <div class="input check_boxes required wish_payment_type">
    <div class="wish_payment_type">
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_1">
        <input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_2">
        <input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_3">
        <input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
      </label>

      <input id='submit' type="submit" value="Submit">
  </div>
</form>

जे एस:

var verifyPaymentType = function () {
  var checkboxes = $('.wish_payment_type .checkbox');
  var inputs = checkboxes.find('input');
  var first = inputs.first()[0];

  inputs.on('change', function () {
    this.setCustomValidity('');
  });

  first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}

$('#submit').click(verifyPaymentType);

https://jsfiddle.net/oywLo5z4/


यह एक साधारण चाल है। यह jQuery कोड है जो किसी भी व्यक्ति को चेक किए जाने पर required गुणों को बदलकर एचटीएमएल 5 सत्यापन का फायदा उठा सकता है। आपका एचटीएमएल कोड निम्नलिखित है (सुनिश्चित करें कि आप समूह के सभी तत्वों के लिए आवश्यक जोड़ते हैं।)

<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

निम्नलिखित jQuery स्क्रिप्ट है, जो किसी भी को चुना गया है तो आगे सत्यापन जांच अक्षम करता है। नाम तत्व का उपयोग कर चयन करें।

$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

यहां छोटे गॉचा: चूंकि आप एचटीएमएल 5 सत्यापन का उपयोग कर रहे हैं, इसलिए सुनिश्चित करें कि इसे सबमिट करने से पहले इसे सत्यापित करने से पहले इसे निष्पादित करें।

// but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});

हम इसे आसानी से एचटीएमएल 5 के साथ भी कर सकते हैं, बस कुछ jquery कोड जोड़ने की जरूरत है

Demo

एचटीएमएल

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

jQuery

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});




checkbox