Client Side browser default 'required' addition

[CoopsCodes]

Hi team,

I have been in the process of adding this to my forms as it will standardise the phone number inputs across the application.

Problem is in a few of my forms we rely on the browser default required on our main form to help progress users through inputs they missed, and while you have validation it skips by the browser default and creates a different behaviour.

What is possibility of passing required as an option for those that want to opt in?

At the moment I am stuck between having to rip out the work I have done, or remove the browser default and implement a totally custom solution.

Kind regards

Cooper

PS: this is a fantastic tool

MDN for Client Form Validation

[ybrusentsov]

@CoopsCodes Hey!
Have you tried to add required param to the inputProps prop?
I think this should solve your problem

<PhoneInput
  defaultCountry="us"
  value={phone}
  onChange={setPhone}
  inputProps={{
    required: true,
  }}
/>

[CoopsCodes]

Thank you so much for getting back to me,

That unfortunately hasnt worked, I will keep trying this morning in case I have missed something, I have included my code in case you wanted to see, I am using it with Styled Components, but that shouldnt impact the functionality

import { Fragment } from "react";
import styled from "styled-components/macro";
import { PhoneInput } from "react-international-phone";
import { theme } from "theme";
import { Semantic } from "components/SemanticComponents";
import "react-international-phone/style.css";

const CustomPhoneInput = styled(PhoneInput)`
 ...styles omitted
`;

const Label = styled.label`
...styles omitted
`;

export default function FormInputPhoneNumber({
  defaultValue,
  onChange,
  isPhoneNumberValid,
}) {
  return (
    <Fragment>
      <Label htmlFor="mobile">
        Contact number
        <Semantic.Span color={`${theme.colors.errorRed}`}>
          {" "}
          (required)
        </Semantic.Span>
        <CustomPhoneInput
          name="mobile"
          id="mobile"
          defaultCountry="au"
          value={defaultValue}
          onChange={onChange}
          // autoComplete="tel"
          inputProps={{
            required: true,
          }}
        />
      </Label>
      {!isPhoneNumberValid && (
        <div style={{ color: "red" }}>Phone is not valid</div>
      )}
    </Fragment>
  );
}

[ybrusentsov]

Seems like you should put id and name to the inputProps too:

<CustomPhoneInput
  defaultCountry="au"
  value={defaultValue}
  onChange={onChange}
  // autoComplete="tel"
  inputProps={{
    required: true,
    name="mobile"
    id="mobile"
  }}
/>

[CoopsCodes]

I added those in to the inputProps as such

          inputProps={{
            required: true,
            name: "mobile",
            id: "mobile",
          }}

But i get an error in the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')
    at setup (backendManager.js:4073:17)
    at welcome (backendManager.js:4057:3)

It might not be related to your API, but it is new when I pass more props

[CoopsCodes]

apologies, I have just seen it will work if the input is totally empty as such

But it will not recognise it if the area code is in the input.

Now I know this I can try with with it, this is an interesting behaviour but I guess from the browser's point of view, it isnt technically empty, I might need to put some minimum browser validation like min="8" etc just to grab this.

Again, thank you for your help.