jQuery मान्य प्लगइन - एक सरल कस्टम नियम कैसे बनायें?

Question

आप jQuery Validate प्लगइन का उपयोग करके एक सरल, कस्टम नियम कैसे बनाते हैं (उपयोग करते हुए addMethod) जो रेगेक्स का उपयोग नहीं करता है?

उदाहरण के लिए, क्या कार्य एक नियम बनाएगा जो केवल तभी मान्य होता है जब चेकबॉक्स के कम से कम एक समूह की जाँच की जाती है?

Comments

95 अपवोट्स, मुझे लगता है कि इसका मतलब है बासिस्टेंस.डे / जेक्वेरी -प्लाजिन्स / जेक्वेरी -प्लाजिन-ओवल्यूशन डॉक्यूमेंटेशन अस्पष्ट हो सकता है: पी

— साइमन अर्नोल्ड

नहीं जानते कि क्या आप अभी भी खोज रहे हैं (4 साल बाद) लेकिन यह जानने में

— Ron van der Heijden

Answer 1

आप कुछ ऐसा करके एक सरल नियम बना सकते हैं:

jQuery.validator.addMethod("greaterThanZero", function(value, element) {
    return this.optional(element) || (parseFloat(value) > 0);
}, "* Amount must be greater than zero");

और फिर इस तरह आवेदन करना:

$('validatorElement').validate({
    rules : {
        amount : { greaterThanZero : true }
    }
});

अपने चेकबॉक्स को मान्य करने के लिए बस 'addMethod' की सामग्री को बदलें।

Comments

यह क्या है। दत्तक (तत्व) || उस समारोह में क्या कर रहे हैं? ऐसा लगता है कि हर नियम में ऐसा है, लेकिन मैं यह नहीं बता सकता कि यह "आवश्यक" को छोड़कर किसी भी नियम के लिए क्यों प्रासंगिक होगा।

— मशीनगॉस्ट

इसे छोड़ने का मतलब यह होगा कि विधि हमेशा लागू होगी, भले ही तत्व की आवश्यकता न हो।

— मार्क स्पैंगलर

मुझे लगता है कि यह। तत्व (तत्व) सही है अगर तत्व शून्य है?

— तन्नुमक

इसे चलाने के लिए, "राशि" पृष्ठ में किसी तत्व का आईडी और नाम होना चाहिए?

— लांग

हां, राशि कुछ इनपुट फॉर्म फ़ील्ड की नाम विशेषता को संदर्भित करती है।

— मार्क स्पैंगलर

Answer 2

$(document).ready(function(){
    var response;
    $.validator.addMethod(
        "uniqueUserName", 
        function(value, element) {
            $.ajax({
                type: "POST",
                url: "http://"+location.host+"/checkUser.php",
                data: "checkUsername="+value,
                dataType:"html",
                success: function(msg)
                {
                    //If username exists, set response to true
                    response = ( msg == 'true' ) ? true : false;
                }
             });
            return response;
        },
        "Username is Already Taken"
    );

    $("#regFormPart1").validate({
        username: {
            required: true,
            minlength: 8,
            uniqueUserName: true
        },
        messages: {
            username: {
                required: "Username is required",
                minlength: "Username must be at least 8 characters",
                uniqueUserName: "This Username is taken already"
            }
        }
    });
});

Comments

मैंने इस तरीके को आजमाया और यह बहुत अच्छा काम करता है, हालांकि, पुरुष किसी भी अन्य मेसेंजर को वापस कर रहे हैं, लेकिन यह अभी भी "ओके" को मान्य नहीं करता है, यह "यूजरनेम पहले से ही लिया हुआ है" में फंस गया है, क्या गलत हो सकता है? मैंने यह भी जाँच लिया है कि यह गलत और सही लौटने के बजाय मूल्यों को प्रतिध्वनित करके ठीक से लौटा है, और यह काम करता है। मुझे लगता है कि मेरा ब्राउज़र रिटर्न गलत नहीं उठा रहा है, क्या यह सच है? यह मुझे पागल बना रहा है ..

— मिकेलगेलो

इसे एक वैरिएबल डालने से काम करने के लिए मिला, जिसे परिणाममथोड से पहले परिणाम कहा जाता है, लगता है कि सफलता समारोह में सही, गलत मान दर्ज हो रहे हैं

— मिकेलगेलो

इससे सावधान रहें। यह पूरी तरह कार्यात्मक कोड नहीं है कि AJAX "सफलता" 'वापसी प्रतिक्रिया' के बाद वापस आने वाली है; रन, अप्रत्याशित व्यवहार के परिणामस्वरूप

— मलाकी

@ मालची सही है। इसके बजाय सिंक कॉल करके इसे ठीक किया जा सकता है लेकिन यह बुरा है। मुझे आश्चर्य है कि क्या इसे प्राप्त करने का कोई और तरीका है? जैसा remoteकि दूसरों ने सुझाव दिया है, लेकिन जहां तक ​​मैं बता सकता हूं कि केवल एक सत्यापन की अनुमति देता है, तो यह काम नहीं करेगा यदि आपको दो async सत्यापन करने की आवश्यकता है या प्रतिक्रिया के आधार पर कई त्रुटि संदेश हैं।

— एडम बर्गमार्क

jquery सत्यापन के लिए एक दूरस्थ विधि है: jqueryvalidation.org/remote-method

— TecHunter

Answer 3

// add a method. calls one built-in method, too.
jQuery.validator.addMethod("optdate", function(value, element) {
        return jQuery.validator.methods['date'].call(
            this,value,element
        )||value==("0000/00/00");
    }, "Please enter a valid date."
);

// connect it to a css class
jQuery.validator.addClassRules({
    optdate : { optdate : true }    
});

Comments

addClassRules जवाब के लिए एक अच्छा इसके अतिरिक्त है।

— चार

@commonpike यह वही है जिसकी मुझे तलाश थी, बहुत बहुत धन्यवाद।

— Simba

Answer 4

कस्टम नियम और डेटा विशेषता

आप एक कस्टम नियम बनाने में सक्षम हैं और इसे dataसिंटैक्स का उपयोग करके विशेषता के साथ एक तत्व में संलग्न कर सकते हैंdata-rule-rulename="true";

यह जाँचने के लिए कि क्या चेकबॉक्स के कम से कम एक समूह की जाँच की गई है:

डेटा नियम-oneormorechecked

<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" />

addMethod

$.validator.addMethod("oneormorechecked", function(value, element) {
   return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

और आप सिंटैक्स का उपयोग करके एक नियम (यानी: कम से कम 1 का चयन किया जाना चाहिए) के संदेश को ओवरराइड कर सकते हैं data-msg-rulename="my new message"।

ध्यान दें

यदि आप data-rule-rulenameविधि का उपयोग करते हैं तो आपको यह सुनिश्चित करने की आवश्यकता होगी कि नियम का नाम सभी लोअरकेस है। ऐसा इसलिए है क्योंकि jQuery सत्यापन फ़ंक्शन तुलना करने के लिए dataRulesलागू होता .toLowerCase()है और HTML5 कल्पना अपरकेस को अनुमति नहीं देता है।

काम करने का उदाहरण

$.validator.addMethod("oneormorechecked", function(value, element) {
  return $('input[name="' + element.name + '"]:checked').length > 0;
}, "Atleast 1 must be selected");

$('.validate').validate();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>

<form class="validate">
    red<input type="checkbox" name="colours[]" value="red" data-rule-oneormorechecked="true" data-msg-oneormorechecked="Check one or more!" /><br/>
    blue<input type="checkbox" name="colours[]" value="blue" /><br/>
    green<input type="checkbox" name="colours[]" value="green" /><br/>
    <input type="submit" value="submit"/>
</form>

Comments

केवल jquery.validate ver> = 1.10 के लिए

— Pavel Nazarov

मैं अपने जीवन के लिए आधिकारिक दस्तावेज में नहीं मिला, काश वे इसे और अधिक स्पष्ट करते। धन्यवाद!

— जोश मैक

Answer 5

धन्यवाद, यह काम किया!

यहाँ अंतिम कोड है:

$.validator.addMethod("greaterThanZero", function(value, element) {
    var the_list_array = $("#some_form .super_item:checked");
    return the_list_array.length > 0;
}, "* Please check at least one check box");

Answer 6

आप इस तरह से एक कस्टम नियम जोड़ सकते हैं:

$.validator.addMethod(
    'booleanRequired',
    function (value, element, requiredValue) {
        return value === requiredValue;
    },
    'Please check your input.'
);

और इसे एक नियम के रूप में इस तरह जोड़ें:

PhoneToggle: {
    booleanRequired: 'on'
}        

Answer 7

इस स्थिति के लिए: उपयोगकर्ता साइनअप फ़ॉर्म, उपयोगकर्ता को एक उपयोगकर्ता नाम चुनना होगा जो नहीं लिया गया है।

इसका मतलब है कि हमें एक स्वनिर्धारित सत्यापन नियम बनाना होगा, जो दूरस्थ सर्वर के साथ एसिंक्स http अनुरोध भेजेगा।

1. अपने html में एक इनपुट तत्व बनाएं:

<input name="user_name" type="text" >

2. अपना फॉर्म सत्यापन नियम घोषित करें:

  $("form").validate({
    rules: {
      'user_name': {
        //  here jquery validate will start a GET request, to 
        //  /interface/users/is_username_valid?user_name=<input_value>
        //  the response should be "raw text", with content "true" or "false" only
        remote: '/interface/users/is_username_valid'
      },
    },

3. दूरस्थ कोड इस तरह होना चाहिए:

class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end