प्रवेश पर फ़ील्ड मान्य करना या रेगेक्स सत्यापन के साथ सबमिट करने पर एम्बेड करना

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

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

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

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

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

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

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