javascript - नाम मूल्य के बजाय वर्ग का उपयोग कर jQuery सत्यापन




class jquery-validate (5)

JQuery का उपयोग कर समाधान यहां दिया गया है:

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });

https://code.i-harness.com

मैं jquery मान्य प्लगइन का उपयोग कर एक फॉर्म को सत्यापित करना चाहता हूं, लेकिन मैं HTML के भीतर 'नाम' मान का उपयोग करने में असमर्थ हूं - क्योंकि यह एक सर्वर है जो सर्वर ऐप द्वारा भी उपयोग किया जाता है। विशेष रूप से, मुझे समूह से चेक किए गए चेकबॉक्स की संख्या सीमित करने की आवश्यकता है। (अधिकतम 3.) मैंने जो उदाहरण देखे हैं, प्रत्येक तत्व के नाम विशेषता का उपयोग करें। मैं क्या करना चाहता हूं इसके बजाय कक्षा का उपयोग करना है, और उसके बाद एक नियम घोषित करना है।

एचटीएमएल

यह काम:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation"  value="1" />

यह काम नहीं करता है, लेकिन मैं इसका लक्ष्य रख रहा हूं:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" />

जावास्क्रिप्ट:

var validator = $(".formToValidate").validate({    
    rules:{     
    "salutation":{  
             required:true,  
        },  
        "checkBox":{  
             required:true,  
          minlength:3  }  
   }   
});

क्या ऐसा करना संभव है - क्या नियम विकल्पों के नाम के बजाय कक्षा को लक्षित करने का कोई तरीका है? या मुझे एक कस्टम विधि जोड़नी है?

चीयर्स, मैट


आप .rules("add", options) का उपयोग कर उस चयनकर्ता के आधार पर नियम जोड़ सकते हैं, बस अपने मान्य विकल्पों के आधार पर कक्षाओं को चाहते हैं, और $(".formToValidate").validate({... }); को कॉल करने के बाद, किसी भी नियम को हटा दें $(".formToValidate").validate({... }); , यह करो:

$(".checkBox").rules("add", { 
  required:true,  
  minlength:3
});

मुझे पता है कि यह एक पुराना सवाल है। लेकिन मुझे भी हाल ही में एक की जरूरत थी, और मुझे यह सवाल स्टैक ओवरफ्लो + इस ब्लॉग से एक और जवाब मिला। ब्लॉग में जो जवाब था वह अधिक सीधे आगे था क्योंकि यह विशेष रूप से इस तरह के सत्यापन के लिए केंद्रित है। यहां है कि इसे कैसे करना है।

$.validator.addClassRules("price", {
     required: true,
     minlength: 2
});

इस विधि के लिए आपको इस कॉल के ऊपर वैध विधि की आवश्यकता नहीं है।

उम्मीद है कि यह भविष्य में किसी की भी मदद करेगा। here स्रोत


मेरे लिए, कुछ तत्व पेज लोड पर बनाए जाते हैं, और कुछ उपयोगकर्ता द्वारा गतिशील रूप से जोड़े जाते हैं; मैंने यह सुनिश्चित करने के लिए इसका इस्तेमाल किया कि सब कुछ DRY रहे।

सबमिट पर, कक्षा x के साथ सबकुछ ढूंढें, कक्षा x को हटाएं, नियम x जोड़ें।

$('#form').on('submit', function(e) {
    $('.alphanumeric_dash').each(function() {
        var $this = $(this);
        $this.removeClass('alphanumeric_dash');
        $(this).rules('add', {
            alphanumeric_dash: true
        });
    });
});

यहां मेरा समाधान है (कोई jQuery की आवश्यकता नहीं है ... बस जावास्क्रिप्ट):

function argsToArray(args) {
  var r = []; for (var i = 0; i < args.length; i++)
    r.push(args[i]);
  return r;
}
function bind() {
  var initArgs = argsToArray(arguments);
  var fx =        initArgs.shift();
  var tObj =      initArgs.shift();
  var args =      initArgs;
  return function() {
    return fx.apply(tObj, args.concat(argsToArray(arguments)));
  };
}
var salutation = argsToArray(document.getElementsByClassName('salutation'));
salutation.forEach(function(checkbox) {
  checkbox.addEventListener('change', bind(function(checkbox, salutation) {
    var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
    if (numChecked >= 4)
      checkbox.checked = false;
  }, null, checkbox, salutation), false);
});

इसे <body> के अंत में एक स्क्रिप्ट ब्लॉक में रखें और स्निपेट इसके जादू करेगा, अधिकतम चेक में चेकबॉक्स की संख्या को सीमित कर देगा (या जो भी संख्या आप निर्दिष्ट करते हैं)।

यहां, मैं आपको एक टेस्ट पेज भी दूंगा (इसे फ़ाइल में पेस्ट करें और इसे आजमाएं):

<!DOCTYPE html><html><body>
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<script>
    function argsToArray(args) {
      var r = []; for (var i = 0; i < args.length; i++)
        r.push(args[i]);
      return r;
    }
    function bind() {
      var initArgs = argsToArray(arguments);
      var fx =        initArgs.shift();
      var tObj =      initArgs.shift();
      var args =      initArgs;
      return function() {
        return fx.apply(tObj, args.concat(argsToArray(arguments)));
      };
    }
    var salutation = argsToArray(document.getElementsByClassName('salutation'));
    salutation.forEach(function(checkbox) {
      checkbox.addEventListener('change', bind(function(checkbox, salutation) {
        var numChecked = salutation.filter(function(checkbox) { return checkbox.checked; }).length;
        if (numChecked >= 3)
          checkbox.checked = false;
      }, null, checkbox, salutation), false);
    });
</script></body></html>




jquery-validate