how to remove whitespace from password validation in react

Question

In password field if I give "Password@345" its accepted and right but if I give "Password @ 345" its also accepted but its should not accepted because condition is there is no whitespace, how to remove the whitespace that if I type password with whitespace it should give error.

import React from "react";
import { Formik, Form, Field } from 'formik';
 import * as Yup from 'yup';
export default function DropDown() {
 const SignupSchema = Yup.object().shape({
    Password: Yup.string()
     .matches(
        "^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#!@$%^&*()+=]).{8,20}$",
        `Should contains at least 8 characters and at most 20 characters\n 
        Should contains at least one digit\n 
        Should contains at least one upper case alphabet\n 
        Should contains at least one lower case alphabet\n
        Should contains at least one special character which includes !@#$%&*()+=^\n
        Should doesn't contain any white space`
        )
      .required('password is required'),
   
  });
  return (
    <>
     
     <Formik
       initialValues={{
         Password: '',
        }}
       validationSchema={SignupSchema}
       onSubmit={values => {
         console.log(values);
       }}
     >
       {({ errors, touched }) => (
         <Form>
           <Field name="Password" placeholder="type password" autoFocus="true" autoComplete="off"/>
           {errors.Password && touched.Password ? (
             <div style={{color:"red"}}>{errors.Password}</div>
           ) : null}
          
          <br/><br/>  
          
           <button type="submit" >Submit</button>
         </Form>
       )}
     </Formik>
    </>
  );
}

You should really split up your validation, each separate condition should be it's own validation test/message. As-is if any one condition fails you have no way of letting the user know which cases passed/failed and they may need to guess. Better to let user know exactly what failed requirements. Keep It Silly Simple, right? — Drew Reese
– Drew Reese, Commented Dec 21, 2021 at 5:45

Saeed Shamloo · Accepted Answer · 2021-12-21 05:38:18Z

3

By using yup you can define multiple match on your schema, so in your issue, you can define a separate match to check if password contains space or not and then apply other validation terms. like below example:

const SignupSchema = Yup.object().shape({
  Password: Yup.string()
    .matches(/^\S*$/, 'Whitespace is not allowed')
    .matches(
      '^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#!@$%^&*()+=]).{8,20}$',
      `Should contains at least 8 characters and at most 20 characters\n 
      Should contains at least one digit\n 
      Should contains at least one upper case alphabet\n 
      Should contains at least one lower case alphabet\n
      Should contains at least one special character which includes !@#$%&*()+=^\n
      Should doesn't contain any white space`
    )
    .required('password is required'),
});

answered Dec 21, 2021 at 5:38

Saeed Shamloo

6,6021 gold badge11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Drew Reese Over a year ago

In fact, each separate condition should be it's own validation test/message.

Saeed Shamloo Over a year ago

Yes, that's because I use a separate match.

Drew Reese Over a year ago

No, this is a good start, IMO, I meant that each "Should...." should have it's own matcher. I left a more descriptive comment to OP above.

Sougata Mukherjee Over a year ago

yes Saeed Shamloo its working fine

CinCout · Accepted Answer · 2021-12-21 05:41:29Z

1

That's because you are matching using . which also accepts whitespaces.

Use \S instead:

^(?=.*?[A-Za-z0-9#!@$%^&*()+=])\S{8,20}$

Note how all the lookaheads can be combined into one to make the regex shorter and easier to read.

Demo

answered Dec 21, 2021 at 5:41

CinCout

9,62916 gold badges55 silver badges74 bronze badges

Collectives™ on Stack Overflow

how to remove whitespace from password validation in react

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related