jQuery सत्यापन: डिफ़ॉल्ट त्रुटि संदेश बदलें

Question

JQuery सत्यापन प्लगइन में डिफ़ॉल्ट त्रुटि मानों को बदलने का एक सरल तरीका है ?

मैं सिर्फ अपने ऐप के लिए अधिक व्यक्तिगत होने के लिए त्रुटि संदेशों को फिर से लिखना चाहता हूं - मेरे पास बहुत सारे फ़ील्ड हैं, इसलिए मैं फ़ील्ड x के लिए व्यक्तिगत रूप से संदेश सेट नहीं करना चाहता ... मुझे पता है कि मैं ऐसा कर सकता हूं!

Answer 1

संदेशों को ओवरराइड करने के लिए सत्यापन प्लगइन के बाद शामिल एक अलग फ़ाइल / स्क्रिप्ट में इस कोड को जोड़ें , संपादित करें :)

jQuery.extend(jQuery.validator.messages, {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
    minlength: jQuery.validator.format("Please enter at least {0} characters."),
    rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
    range: jQuery.validator.format("Please enter a value between {0} and {1}."),
    max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});

Comments

बढ़िया काम किया। मैंने अभी जोड़ा: $ .extend ($। Validator.messages, {अपेक्षित: "आवश्यक"});

— रवि राम

मैंने इसे बहुभाषी रूप के लिए एक त्वरित सुधार के रूप में उपयोग किया: यदि ($ ('शरीर')। Attr ('lang') == "es") {jQuery.extend ...};

— हेराल्डमोनकी

@NickCraver, सिर्फ यह कहना चाहता था कि मैंने इस सवाल के साथ इतने उत्थान की उम्मीद नहीं की थी ... और समय पर और त्वरित उत्तर के लिए अच्छी तरह से किया गया!

— केविन ब्राउन

क्षमा नहीं कर रहा है। कोई संदेश नहीं दिखाया गया है, बस आवश्यक संदेश दिखाया गया है, जबकि मैंने मीनलेंग्थ का उपयोग किया है।

— प्रतिक

क्या हम त्रुटि संदेश में फ़ॉर्म एलिमेंट नाम शामिल कर सकते हैं। केवल सामान्य संदेश के बजाय। अर्थात इस क्षेत्र के बजाय लॉगिन क्षेत्र की आवश्यकता है

— मुसद्दीक खान

Answer 2

आप मान्य कॉल में अपने संदेश निर्दिष्ट कर सकते हैं। मान्यकरण प्लगइन प्रलेखन ( http://jquery.bassistance.de/validate/demo/milk/ ) में उपयोग किए जाने वाले दूध साइनअप फॉर्म याद रखें, से इस कोड को उठाना और संक्षिप्त करना , आप आसानी से अपने संदेश निर्दिष्ट कर सकते हैं

var validator = $("#signupform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2,
            remote: "users.php"
        }
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname",
        username: {
            required: "Enter a username",
            minlength: jQuery.format("Enter at least {0} characters"),
            remote: jQuery.format("{0} is already in use")
        }
    }
});

मान्य के लिए पूरा एपीआई (...): http://jqueryvalidation.org/validate

Comments

इनपुट के लिए धन्यवाद, लेकिन यदि आप प्रश्न को अधिक बारीकी से पढ़ते हैं, तो मैं पूछ रहा हूं कि चूक कैसे बदलें। मुझे पता है कि मैं अद्वितीय संदेश निर्दिष्ट कर सकता हूं।

— केविन ब्राउन

बस पिचिंग - यह मेरे लिए उपयोगी था, भले ही सवाल के लिए लक्ष्य पर न हो।

— ब्रायन मेलोन

हाँ, यह वास्तव में चूक को बदलने की तुलना में एक बेहतर विचार की तरह दिखता है, हालांकि यह वही है जो ओपी ने मूल रूप से पूछा था

— रोजर

@LisaCerilli मैं एक ही था, बदलकर तय jQuery.format("...करने के लिएjQuery.validator.format("...

— Lehel

मुझे पता है कि यह पुराना है, लेकिन पहला लिंक टूट गया है।

— अकुसमता

Answer 3

यह मेरे लिए काम किया:

$.validator.messages.required = 'required';

Comments

$ .validator.messages.maxlength = jQuery.validator.format ("कृपया {0} वर्णों से अधिक नहीं दर्ज करें"); काम नहीं करता। मैं इसके बजाय निक क्रावर्स समाधान का उपयोग करके शर्करा करता हूं।

— विदुर वेस्टनेस

@VidarVestnes समाधान आपके परिदृश्य के लिए भी काम करता है। आप केवल प्रारूप स्ट्रिंग निर्दिष्ट करते हैं, और प्लगइन बाकी करता है:$.validator.messages.maxlength = "Please enter no more than {0} characters.";

— rusmus

Answer 4

यह मेरे लिए काम किया:

// Change default JQuery validation Messages.
$("#addnewcadidateform").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            email: "required email",
        },
        messages: {
            firstname: "Enter your First Name",
            lastname: "Enter your Last Name",
            email: {
                required: "Enter your Email",
                email: "Please enter a valid email address.",
            }
        }
    })

Comments

ध्यान दें कि भले ही यह उत्तर jqueryValidation के लिए है और jqueryFileUpload नहीं है, फ़ंक्शन messagesमें विकल्प भी हैं $().fileupload।

— जेवियर पोर्टेबिस

Answer 5

चूंकि हम पहले से ही JQuery का उपयोग कर रहे हैं, हम पेज डिजाइनरों को कोड के बजाय मार्कअप में कस्टम संदेश जोड़ सकते हैं:

<input ... data-msg-required="my message" ...

या, सभी क्षेत्रों पर एकल लघु डेटा-संदेश विशेषता का उपयोग करके अधिक सामान्य समाधान:

<form id="form1">
    <input type="text" id="firstName" name="firstName" 
        data-msg="Please enter your first name" />
    <br />
    <input type="text" id="lastName" name="lastName" 
        data-msg="Please enter your last name" />
    <br />
    <input type="submit" />
</form>

और कोड तब कुछ इस तरह से होता है:

function getMsg(selector) {
    return $(selector).attr('data-msg');
}

$('#form1').validate({
    // ...
    messages: {
        firstName: getMsg('#firstName'),
        lastName: getMsg('#lastName')
    }
    // ...
});

Comments

यह एक महान रणनीति है, खासकर यदि आपको अपने जेएस फाइलों में नहीं एक गतिशील संदेश सेट की आवश्यकता होती है ...

— चार्ल्स हार्मन

@ user1207577, हां हम कस्टम संदेश सेट कर सकते हैं लेकिन हम न्यूनतम लंबाई और अधिकतम लंबाई संदेश कैसे प्रदर्शित कर सकते हैं। मेरा मतलब है कि यदि हम कस्टम सेट करते हैं तो न्यूनतम और अधिकतम संदेश प्रदर्शित नहीं होता है। आइडिया?

— नरेन वर्मा

Answer 6

एक अन्य संभावित समाधान खेतों में लूप करना है, प्रत्येक फ़ील्ड में एक ही त्रुटि संदेश जोड़ना।

$('.required').each(function(index) {
  $(this).rules("add", {
    messages: {
      required: "Custom error message."
   }
  });
});

Comments

यह समाधान वास्तव में वही था जिसकी मैं तलाश कर रहा था ... मेरे परिदृश्य में हर फॉर्म फ़ील्ड में एक लेबल होता है, इसलिए मैं इसके संबंधित लेबल को ढूंढता हूं और संदेश को प्रस्तुत करता हूं ताकि अंत में यह कहे कि "पहले नाम की आवश्यकता है।" बहुत अच्छा, गांसके।

— tjans

+1 जबकि अन्य सभी उत्तर मान्य हैं, यह वह वाक्य-विन्यास है जिसकी मुझे तलाश थी।

— scott.korin

Answer 7

प्लगइन स्रोत कोड को बदलने के बजाय आप प्रारूप में एक अतिरिक्त जेएस फ़ाइल को डाउनलोड स्थानीयकरण फ़ोल्डर में शामिल कर सकते हैं और सत्यापन लोड करने के बाद उसे शामिल कर सकते हैं। js

jQuery.extend(jQuery.validator.messages, {
    required: ...,
    maxlength: jQuery.validator.format(...),
    ...
});

Comments

यह नहीं है। यह तकनीकी रूप से आपके उत्तर के समान है। मैंने आपके उत्तर के पुराने संस्करण में अपनी टिप्पणी पोस्ट की। फिर अपना जवाब लिखा। सभी लगातार पृष्ठ को फिर से लोड किए बिना। इस प्रकार मैं केवल जब अपनी टिप्पणी की जाँच आप जवाब संपादित देखा

— घबराना

Answer 8

@ जोश: आप अपने संसाधन बंडल से अनुवादित संदेश के साथ अपने समाधान का विस्तार कर सकते हैं

<script type="text/javascript">
    $.validator.messages.number = '@Html.Raw(@Resources.General.ErrorMessageNotANumber)';
</script>

यदि आप इस कोड को अपने _Layout.cshtml (MVC) में रखते हैं तो यह आपके सभी विचारों के लिए उपलब्ध है

Answer 9

मैंने कभी नहीं सोचा था कि यह इतना आसान होगा, मैं इस तरह के सत्यापन को संभालने के लिए एक परियोजना पर काम कर रहा था।

नीचे दिए गए जवाब से उन लोगों को बहुत मदद मिलेगी, जो बहुत प्रयास किए बिना सत्यापन संदेश बदलना चाहते हैं।

नीचे दिए गए दृष्टिकोण "यह फ़ील्ड" के स्थान पर "प्लेसहोल्डर नाम" का उपयोग करता है।

आप आसानी से चीजों को संशोधित कर सकते हैं

   // Jquery Validation   
   $('.js-validation').each(function(){

       //Validation Error Messages 

       var validationObjectArray = [];

       var validationMessages = {};

       $(this).find('input,select').each(function(){  // add more type hear

          var singleElementMessages = {};

          var fieldName = $(this).attr('name');

          if(!fieldName){  //field Name is not defined continue ;
              return true;
          }


          // If attr data-error-field-name is given give it a priority , and then to placeholder and lastly a simple text

          var fieldPlaceholderName = $(this).data('error-field-name') || $(this).attr('placeholder') || "This Field";

          if( $( this ).prop( 'required' )){

              singleElementMessages['required'] = $(this).data('error-required-message') || $(this).data('error-message')  || fieldPlaceholderName + " is required";

          }

          if( $( this ).attr( 'type' ) == 'email' ){

              singleElementMessages['email'] = $(this).data('error-email-message') || $(this).data('error-message')  || "Enter valid email in "+fieldPlaceholderName;

          }       



          validationMessages[fieldName] = singleElementMessages;

       });


       $(this).validate({
          errorClass   : "error-message",
          errorElement : "div",
          messages     : validationMessages  
       });  
   });  

Comments

इसे साझा करने के लिए आपको धन्यवाद। "ErrorClass" और "errorElement" का उपयोग प्रतिभा है! मैं अब सत्यापन से निर्मित अपनी त्रुटि संदेशों की स्टाइलिंग और स्थान को लागू कर सकता हूं!

— justdan23

Answer 10

नवीनतम संस्करण में कुछ अच्छे इन-लाइन सामान हैं जो आप कर सकते हैं।

यदि यह एक सरल इनपुट फ़ील्ड है, तो आप data-validation-error-msgइस तरह की विशेषता जोड़ सकते हैं -

data-validation-error-msg="Invalid Regex"

यदि आपको कुछ भारी चाहिए तो आप उन सभी मूल्यों के साथ एक चर का उपयोग करके चीजों को पूरी तरह से अनुकूलित कर सकते हैं, जो मान्य फ़ंक्शन में पारित हो गए हैं। पूर्ण विवरण के लिए इस लिंक का संदर्भ दें - https://github.com/victorjonsson/jQuery-Form-Validator#fully-customizable

Comments

यह jQuery मान्यकरण ओपी के बारे में पूछे जाने वाले प्लगइन की तुलना में एक अलग प्लगइन है। हालांकि एक बुरा विकल्प नहीं है, खासकर यदि HTML में सत्यापन-संबंधी डेटा (नियम, संदेश) आपको देते हैं (jQuery मान्यकरण प्लगिन विपरीत तरीका अपनाता है, उस सभी के लिए जावास्क्रिप्ट का उपयोग करके)। रिकॉर्ड के लिए एक और विकल्प का उल्लेख करने के लिए, Parsley.js एक और उपयोग किया गया और पूर्ण विशेषताओं वाला सत्यापन प्लगइन है जो HTML विशेषताओं पर निर्भर करता है।

— एंड्रे दोनों

Answer 11

सभी डिफ़ॉल्ट त्रुटि संदेशों को हटाने के लिए उपयोग करें

$.validator.messages.required = "";

Comments

विशेष क्षेत्र के लिए यह कैसे करें?

— 151291

Answer 12

jQuery के फॉर्म सत्यापन कस्टम त्रुटि संदेश -tutsmake

डेमो

$(document).ready(function(){
  $("#registration").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },      
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10,
      },
      password: {
        required: true,
        minlength: 5,
      }
    },
    messages: {
      firstname: {
      required: "Please enter first name",
     },      
     lastname: {
      required: "Please enter last name",
     },     
     phone: {
      required: "Please enter phone number",
      digits: "Please enter valid phone number",
      minlength: "Phone number field accept only 10 digits",
      maxlength: "Phone number field accept only 10 digits",
     },     
     email: {
      required: "Please enter email address",
      email: "Please enter a valid email address.",
     },
    },
  
  });
});

<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
  .error{
    color: red;
  }
  label,
  input,
  button {
    border: 0;
    margin-bottom: 3px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 12px solid #28BAA2;
    border-color: #28BAA2;
    border-radius: 15px;
    margin-top: 10px;
    background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Registration</h2>
  <form action="#" name="registration" id="registration">
 
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"><br>
 
    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
 
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" placeholder="8889988899"><br>  
 
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="[e-mail]"><br>
 
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder=""><br>
 
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>
 
</body>
</html>

Answer 13

इन कस्टम त्रुटि संदेशों के बजाय हम टेक्स्ट फ़ील्ड के प्रकार को निर्दिष्ट कर सकते हैं।

पूर्व: टाइप करने के लिए फ़ील्ड का प्रकार = 'ईमेल' सेट करें

तब प्लगइन क्षेत्र की पहचान करेगा और सही ढंग से मान्य करेगा।

Comments

वह इसे सही तरीके से सत्यापित करने के लिए नहीं कहता है, वह संदेशों को फिर से लिखने के लिए कहता है .... "मैं सिर्फ अपने ऐप के लिए और अधिक व्यक्तिगत होने के लिए त्रुटि संदेशों को फिर से लिखना चाहता हूं"

— बेनोइट