Interactive Card Details Form with React, Formik and Yup

Community feedback

• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  By the way i have a question ...how did u manage the card number space after 4 digits each time ...i couldn't figure out how to do that

  0

  ---

  

  Catalin Banici•260

  @CatalinBaniciPosted almost 2 years ago

  @yishak621 I also just found this:

  For the input:

  value={values.cardNumber
                .replace(/\s/g, "")
                .replace(/([0-9]{4})/g, "$1 ")
                .trim()} 
  

  For the number on the card:

  <span className="on-card-number">
            {values.cardNumber
              .replace(/\s/g, "")
              .replace(/([0-9]{4})/g, "$1 ")
              .trim() || "0000 0000 0000 0000"}
          </span>
  

  0

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @CatalinBanici Please can you elaborate the answer?

  0

  

  Catalin Banici•260

  @CatalinBaniciPosted almost 2 years ago

  @yishak621 Sorry, I used React, I don't know what did you use, but it should work with plain javascript also, but, that's basically regex, I don't know how to explain, google 'white space after 4 digits credit card' and you will find something like this.

  This is how the whole card number input looks like in my code with react (notice the comment):

  <label className="card-number label">
            CARD NUMBER
            <input
              className="input-card-number"
              style={
                errors.cardNumber &&
                touched.cardNumber && { border: "1px solid red" }
              }
              type="text"
              id="cardNumber"
              placeholder="e.g. 1234 5678 9123 0000"
              maxLength="19"
              minLength="19"
              // SPACE AFTER EVERY 4 DIGIT
              value={values.cardNumber
                .replace(/\s/g, "")
                .replace(/([0-9]{4})/g, "$1 ")
                .trim()}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            {errors.cardNumber && touched.cardNumber && (
              <span className="error-message">{errors.cardNumber}</span>
            )}
          </label>
  

  1
• 

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  Why don't u use maxlength attribute in the input

                  <label for="cvc">cvc</label> 
                   <input 
                     id="input-cvc" 
                     type="tel" 
                     placeholder="e.g 123" 
                     required="required" 
                     maxlength="3" 
                   />
  

  0

  ---

  

  Catalin Banici•260

  @CatalinBaniciPosted almost 2 years ago

  @yishak621 I did use maxlength tho, and that works. I can also use minlength, I just noticed, but I still can't make it show an error with yup

  0

  

  yishak abrham•2,150

  @yishak621Posted almost 2 years ago

  @CatalinBanici @CatalinBanici u dont have to show the error for max length but u can use javascript if the value is greater than ur specific number Example

  //function that limit max length for inputs[number] 
   function MaxLength(input) { 
     return input.addEventListener('input', function () { 
       if (this.value.length > 2) { 
         this.value = this.value.slice(0, 2); 
      //ur error display here for maxlength
   } 
     }); 
   } 
   MaxLength(monthInput);
  

  Marked as helpful

  1