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

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

कार्य मैं चाहता हूं: मैं अधिमानतः चाहता हूं कि इसे तुरंत सत्यापित किया जाए, जैसे कुछ वेबसाइट जब आप गलत ईमेल प्रारूप दर्ज करते हैं, तो यह आपको तब भी बताएगी जब आप अभी भी हैं टेक्स्ट फ़ील्ड या एक बार जब आप इससे दूर क्लिक करते हैं।

मैंने कोशिश की है:

  function validateHhMm(inputField) {
          var isValid = /^(?:https?:\/\/)?(?:(?:www|m)\.)?twitter\.com\/\w+\/status\/\d+(?:\/\/?)?\$/.test(inputField.value);

          if (isValid) {
              inputField.style.backgroundColor = '#bfa';
          } else {
              inputField.style.backgroundColor = '#fba';
          }

          return isValid;
      }

साथ:

<%= form_for(@order, url: listing_orders_path([@listing, @listing_tweet]), remote: true) do |form| %>

                             <% if @order.errors.any? %>
                               <ul>
                                 <% @order.errors.full_messages.each do |msg| %>
                                 <div class="alert alert-danger alert-dismissable">
                                   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                   <%= msg %>
                                 </div>
                                 <% end %>
                               </ul>
                             <% end %>

                               <div class="form-group">
                                 <%= form.label :name, "Who's the Shout for?" %>
                                 <%= form.text_field :name, class: "form-control", required: true %>
                               </div>

                               <div class="form-group">
                                 <%= form.label :email %>
                                 <%= form.text_field :email, class: "form-control", required: true   %>
                               </div>

                               <div class="form-group">
                                 <%= form.label :description %>
                                 <%= form.text_area :description, class: "form-control", :rows => 10, required: true    %>
                               </div>

                               <div class="form-group">
                                 <%= form.label :twitter_tag %>
                                 <%= form.text_field :twitter_tag, class: "form-control", required: true  %>
                               </div>

                               <div class="form-group">
                                 <div class="input-group">
                                   <%= form.label :twitter_link, "Twitter Link", id: "twitter" %>

                                 </div>
                                 <%= form.text_field :twitter_link, class: "form-control", required: true  %>
                               </div>

                               <script
                                 src="https://js.stripe.com/v3/">
                               </script>

                                 <div class="form-row">
                                   <label for="card-element-2">
                                     Credit or debit card
                                   </label>
                                   <div id="card-element-2" class="form-control">
                                   </div>

                                   <div id="card-errors" role="alert"></div>
                                 </div>
                                   <br>
                                   <div class="form-group">

                                 <%= form.submit, id:"button-element" %>

                               </div>

                               <span class="token"></span>
                               <% end %>
                               <% end %>


                       </div>

किसी भी कारण से, मुझे इस नियंत्रक के भीतर पॉप अप करने के लिए नोटिस नहीं मिल सकते हैं (इसका उपयोग किसी अन्य नियंत्रक शो पेज के भीतर किया जाता है जो समस्या पैदा कर सकता है) --- तो मुझे लगा कि मैं इस मार्ग पर जाऊंगा और जावास्क्रिप्ट/jquery के साथ प्रयास करूंगा जैसा कि मैं बल्कि वास्तविक समय में सत्यापन होगा।

अब, पहेली का एक और हिस्सा है स्ट्राइप कोड:

var stripe = Stripe('pk_test_1234567890');

var elements = stripe.elements();

var style = {
  base: {
   #styling_code_here
};

var card = elements.create('card', {style: style});

card.mount('#card-element-2');

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var form = document.getElementById('payment_form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      stripeTokenHandler(result.token);
    }
  });
});

  function stripeTokenHandler(token) {
    var form = document.getElementById('payment_form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    form.submit();
  }

मैंने उपरोक्त कोड जोड़ा क्योंकि शायद मुझे उसमें सत्यापन एम्बेड करना चाहिए?

उपरोक्त प्रयास के अलावा, मैंने कुछ अन्य बनाए हैं लेकिन कोई भी फ़ील्ड खाली होने पर मान्य करने के अलावा कोई भी काम नहीं करता है, इस रेल में पहले से ही इसके लिए एक विशेषता है। मैं रेगेक्स के लिए वास्तविक समय में या एक बार फ़ील्ड छोड़े जाने के बाद सत्यापन चाहता हूं।

0
uno 16 जिंदा 2019, 07:20

1 उत्तर

सबसे बढ़िया उत्तर

HTML5 में एक अंतर्निहित सुविधा है:

उदाहरण के लिए यह काम करेगा:

<%= form.text_field :twitter_link, class: "form-control", required: true, pattern: '^(?:https?:\/\/)?(?:(?:www|m)\.)?twitter\.com\/\w+\/status\/\d+(?:\/\/?)?$',
                                 title: "Click the '?' for more information"  %>

सत्यापन के काम नहीं करने पर एक संदेश दिखाई देगा।

एक मुद्दा मैंने नोटिस किया है कि जब पृष्ठ पूरी तरह से लोड नहीं होता है तो यह फ्रंट एंड सत्यापन काम नहीं करता है। यदि आप इसका उपयोग करने जा रहे हैं, तो मैं एक मॉडल सत्यापन का उपयोग करने का सुझाव देता हूं जैसा कि मैंने किया था।

0
uno 17 जिंदा 2019, 05:30