jQuery বৈধতা প্লাগইন - কিভাবে একটি সাধারণ কাস্টম বিধি তৈরি করতে?


351

আপনি কীভাবে addMethodএকটি রেগেক্স ব্যবহার না করে jQuery বৈধতা প্লাগইন (ব্যবহার করে ) ব্যবহার করে একটি সাধারণ, কাস্টম নিয়ম তৈরি করবেন ?

উদাহরণস্বরূপ, কোন ফাংশন এমন একটি নিয়ম তৈরি করবে যা কেবলমাত্র যদি গ্রুপের চেকবক্সগুলির মধ্যে একটিরও চেক করা হয় তবে তা বৈধ হয়?


41
95 উর্ধ্বতন, আমি অনুমান করেছি এটির অর্থ bassistance.de/jquery-plugins/jquery-plugin- বৈধকরণের ডকুমেন্টেশন অস্পষ্ট হতে পারে: পি
সাইমন আর্নল্ড

যদি এখনও অনুসন্ধান করা হয় (4 বছর পরে) জানি না কিন্তু এই সাহায্য করতে পারে learn.jquery.com/plugins/...
রন ভ্যান ডার Heijden

উত্তর:


376

এরকম কিছু করে আপনি একটি সাধারণ নিয়ম তৈরি করতে পারেন:

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 }
    }
});

আপনার চেকবাক্সগুলিকে বৈধতা দেওয়ার জন্য কেবল 'অ্যাডমেথড' এর সামগ্রীগুলি পরিবর্তন করুন।


23
এটি কি op বিভাগীয় (উপাদান) || যে ফাংশন করছেন? এটি প্রতিটি নিয়মের মতো বলে মনে হয় তবে এটি "প্রয়োজনীয়" ব্যতীত কোনও নিয়মের জন্য কেন প্রাসঙ্গিক হবে তা আমি বলতে পারি না।
মেশিনহোস্ট

38
এটিকে ছাড়ার অর্থ হ'ল এই উপাদানটি সর্বদা প্রয়োগ করা হবে, এমনকি যখন উপাদানটির প্রয়োজন হয় না।
মার্ক স্প্যাংলার

আমি এটি গ্রহণ করি যে উপাদানটি নাল হলে এই (অ্যালিমেন্ট) সত্য দেয়?
টুনুমাক

12
এটি চালানোর জন্য, "পরিমাণ" পৃষ্ঠাটির কোনও উপাদানটির আইডি এবং নাম হওয়া উচিত?
হোং লং

6
হ্যাঁ, পরিমাণটি কিছু ইনপুট ফর্ম ক্ষেত্রের নামের বৈশিষ্ট্যকে বোঝায়।
মার্ক স্প্যাংলার

96
$(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"
            }
        }
    });
});

আমি এই পদ্ধতিটি চেষ্টা করেছিলাম এবং এটি বেশ ভাল কাজ করে, তবে পুরুষরা সত্যের চেয়ে অন্য কোনও চিত্র ফেরত দেয় যা এখনও "ওকে" যাচাই করে না এটি "ব্যবহারকারীর নাম ইতিমধ্যে গৃহীত হয়েছে" আটকে আছে, কী ভুল হতে পারে? আমি এটিও পরীক্ষা করে দেখেছি যে এটি মিথ্যা এবং সত্যের পরিবর্তে মানগুলি প্রতিধ্বনিত করে সঠিকভাবে ফিরে এসেছে এবং এটি কাজ করে। আমার ব্রাউজারটি মিথ্যা রিটার্ন তুলছে না বলে মনে হচ্ছে, সত্য? এটি আমাকে পাগল করে দিচ্ছে ..
মাইকেলেঞ্জেলো

1
একটি পরিবর্তনশীল সন্নিবেশ দ্বারা এটি কাজ করেছিলাম যা সংমিশ্রণের আগে ফলাফল বলা হয়, সত্য বলে মনে হচ্ছে, মিথ্যা মানগুলি সাফল্যের ফাংশনের মধ্যে সঠিকভাবে নিবন্ধন করছে
মাইকেলেঞ্জেলো

23
এটির সাথে সাবধানতা অবলম্বন করুন। এটি পুরোপুরি কার্যকরী কোড নয় যে 'এজেএক্স "সাফল্য" রিটার্ন প্রতিক্রিয়া পরে ফিরে আসতে চলেছে; " রান, অপ্রত্যাশিত আচরণের ফলে
মালাচি

1
@ মালাচি সঠিক। পরিবর্তে একটি সিঙ্ক কল করে এটি ঠিক করা যেতে পারে তবে এটি বাজে। আমি অবাক হয়েছি যদি এটি অর্জনের অন্য কোনও উপায় থাকে? নেই remoteঅন্যদের পরামর্শ দিয়েছেন কিন্তু যতদূর আমি বলতে পারেন যে শুধুমাত্র একটি বৈধতা দেয়, তাই এটি কাজ না হলে আপনি দুই ASYNC যাচাই করার দরকার নতুবা প্রতিক্রিয়া উপর নির্ভর করে এতে কয়েক ত্রুটি বার্তা হবে।
অ্যাডাম বার্গমার্ক


70
// 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 }    
});

7
addClassRules উত্তরের একটি দুর্দান্ত সংযোজন।
চার

@ কমোনপাইক এটি ঠিক আমি যা খুঁজছিলাম, অনেক অনেক ধন্যবাদ।
সিম্বা

46

কাস্টম বিধি এবং ডেটা অ্যাট্রিবিউট

আপনি একটি কাস্টম বিধি তৈরি করতে এবং 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()এবং এইচটিএমএল 5 স্পিকার বড় হাতের অনুমতি দেয় না।

কাজের উদাহরণ

$.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>


2
কেবল jquery.)ate ver> = 1.10
পাভেল

আমি আমার জীবনের জন্য এটি অফিসিয়াল ডকুমেন্টেশনে খুঁজে পাইনি, আমি আশা করি তারা এটিকে আরও পরিষ্কার করে দিয়েছে। ধন্যবাদ!
জোশ ম্যাক

22

ধন্যবাদ, এটি কাজ করেছে!

এখানে চূড়ান্ত কোড:

$.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");

13

আপনি এটির মতো একটি কাস্টম বিধি যুক্ত করতে পারেন:

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

এবং এটি এর মতো একটি নিয়ম হিসাবে যুক্ত করুন:

PhoneToggle: {
    booleanRequired: 'on'
}        

1

এই ক্ষেত্রে: ব্যবহারকারীর সাইনআপ ফর্ম, ব্যবহারকারীর অবশ্যই নেওয়া হবে না এমন একটি ব্যবহারকারী নাম বেছে নিতে হবে।

এর অর্থ আমাদের একটি কাস্টমাইজড বৈধকরণের নিয়ম তৈরি করতে হবে, যা দূরবর্তী সার্ভারের সাথে async http অনুরোধ প্রেরণ করবে।

  1. আপনার এইচটিএমএলে একটি ইনপুট উপাদান তৈরি করুন:
<input name="user_name" type="text" >
  1. আপনার ফর্ম বৈধতা বিধি ঘোষণা:
  $("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'
      },
    },
  1. রিমোট কোডটি হওয়া উচিত:
class Interface::UsersController < ActionController::Base
  def is_username_valid
    render :text => !User.exists?(:user_name => params[:user_name])
  end
end
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.