Bootstrap Invoice Validation: How to Validate Invoices using Bootstrap

Bootstrap Invoice Validation : Learn how to validate invoices using Bootstrap in this step-by-step guide. With Bootstrap, you can easily create an invoice validation form that checks for accuracy and completeness, ensuring that your invoices are error-free and professional-looking.

क्या आप त्रुटियों और अशुद्धियों के लिए मैन्युअल रूप से अपने Invoice की Checking करते-करते थक गए हैं? Bootstrap के साथ, आप इस Process को Automate कर सकते हैं और समय बचा सकते हैं। इस Article में, हम आपको Bootstrap का उपयोग करके Invoice को Validate करने के Steps के बारे में बताएंगे, जो आपके Invoice को जल्दी और आसानी से Validation करने में आपकी बहुत सहायता करेगा।

1. What is Bootstrap?

Bootstrap एक Open Source Framework है, यह एक Front-end Framework है जो Web Development के लिए उपयोग किया जाता है। Bootstrap में बहुत से Pre-built in Component और Style Sheets होते हैं जो Website Design को सरल बनाते हैं। साथ वेबसाइट को Responsive Design भी बहुत अच्छे से होती हैं ।

---

2. Why use Bootstrap for Invoice Validation?

Bootstrap से बनाए गए Number, Text और Form Component का उपयोग कर आप एक Web Page या HTML Invoice बना सकते हैं जो इस बनाई गई Invoice के Validation के लिए आसानी से उपयोग किया जा सकता है। Bootstrap Component उपयोग कर आपको बहुत ज्यादा कोड लिखने की आवश्यकता नहीं होती है।

Bootstrap का उपयोग करने से आप एक Responsive Invoice Validation Form बना सकते हैं जो अलग-अलग साइज और स्क्रीन रिज़ॉल्यूशन पर सही तरीके से दिखता है। इसके अलावा, Bootstrap का उपयोग करके आप फॉर्म फील्डों के लिए Validation Logic भी जोड़ सकते हैं। इससे आप Invoice के Column में गलतियों को चेक कर सकते हैं ।

Related Video :

---

3. Creating an Invoice Validation Form with Bootstrap

हमने हमारे Previous Blog मे Bootstrap Invoice बनाना बताई थी, उसकी को आगे Implement करते हुवे हम उसी Invoice मे Bootstrap validation का उपयोग कर रहे हैं। Complete Bootstrap Invoice के लिए यह पढे

3.1 Add Bootstrap form validation Class

सबसे पहले आपने जो भी Invoice बनाई हो उसमे Form Tag पर need-validation class को जोड़े , साथ ही मे एक Attribute novalidate भी लिखे, जैसा की निम्न Example मे बताया हैं । इसके अलावा जो भी action, method आदि जैसे लिखे हैं वैसे ही लिखे रहने देवे ।

 <form method="POST" class="needs-validation" novalidate     ....>

3.2 Add Validation

इसमे बाद आपको जिस भी Field को Required करना हैं उस पर आप एक Attribute required लगा देवे ।

यदि आप चाहते हैं की कम से कम इस Filed पर 4 character टाइप हो उसके बाद ही Form submit हो तो आप minlength का उपयोग कर सकते हैं ।

<input type="text" class="form-control" placeholder="Customer" name="cust_nm" required minlength="4"  >
<div class="invalid-feedback">Please Enter Customer Name </div>

<input type="text" class="form-control" placeholder="Inv. No"  id="inv_no" name="inv_no" autocomplete="off" required >
<div class="valid-feedback">Invoice No. is OK</div>

उपरोक्त Example मे हमने Attribute और Bootstrap Class का उपयोग किया हैं आइए अब इन सभी के बारे मे आपको समझा देते हैं ।

• Required : जब भी आपके द्वारा Required attribute लगाया जाता हैं, तब जब तक एक Filed मे वैल्यू Enter नहीं होगी आपको Form Submit नहीं करने देगा। जब Value लिख दी जाएगी तब आप Form को Submit कर पाएंगे।

• Minlength : इस attribute के बाद आपको number of character देना होते हैं। आप जो भी वैल्यू इसमे देंगे उससे कम character टाइप होने पर Form Submit नहीं होगा।
• Invalid-feedback : यदि आप चाहते हैं की जब Validation चेक हो और Input मे कोई गलती हो तो उसे को एक message red colour मे Field के नीचे ही दिखाई दे तो आप Bootstrap Invalid-feedback Class का उपयोग कर सकते हैं। यह जब ही दिखाई देगा जब input मे validation success नहीं होगा ।

• valid-feedback : यदि आप चाहते हैं की जब Validation Success हो तब भी User को Message दिखाई दे तो आप Bootstrap Valid-feedback Class का उपयोग कर सकते हैं ।

उपरोक्त के अलावा और भी बहुत से Validation हैं हमने इसमे केवल वही Validation लिए हैं जिनका हमने इस Invoice मे उपयोग किया है ।

Learn Google Apps Script Playlist Invoice Example

---

4. JavaScript Function for Bootstrap Validation

यह Function जब Document Load होगा जब Call होना चाहिए , आप इसे As it is अपने HTML page के JavaScript page पर लगाए । यह Call होते हैं ही आपने जीतने भी invalid और valid Feedback लिखे हैं सभी स्क्रीन पर दिखाई देंगे।

function FormValidation()
{
    // Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
    'use strict'
  
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')
  
    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
      .forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
  
          form.classList.add('was-validated')
        }, false)
      })
  })()
}

उपरोक्त Function को हमने अब Page Load या Document Ready function पर call करना हैं ।

$(document).ready(function () {
      FormValidation();
});

5. Testing the Bootstrap Invoice Validation form

हमने Customer Name और Invoice Number वाले Columns पर Validation लगाया था इसलिए जैसे ही हमने Submit किया तो Customer मे Value Enter नहीं होने पर हमे invalid-feedback जो दी Red Colour मे दिखाई देंगे लगा, और invoice number पर Value होने पर हमे Valid-feedback दिखाई देंगे लगा, अन्य जिन Filed या Columns पर हमने Validation नहीं लगाए उन्हे valid मानकर Green Colour से दिखाया गया हैं ।

---

इस Article मे हमने किसी भी Bootstrap Invoice Validation के बारे मे बताया हैं आशा हैं की आपको यह Article बहुत अच्छे से समझ मे आ गया होगा।

आपको यह Article (Bootstrap Invoice Validation) कैसा लगा ? बताना न भूले, मिलते हैं Next Article मे Thanks for Reading ।

हमारे अन्य आर्टिकल

• MySQL Function
• MySQL Stored Procedure
• PHP Get /Post Method के बारे में जाने
• PHP Math Function के बारे में जाने
• C से C ++ सीखे सरल शब्दों में
• PHP Variable के बारे में जाने
• Arduino Control Structure 
• Union in C
• Declaration of Pointer in C
• jQuery Search Filter
• MySQL Create Table | Alter Table | Drop Table
• API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
• CPANEL In Hindi