""" <div className="col-md-6"> <label htmlFor="companyContactNumber" className="form-label w-100 company-contact-number-label" > Company Contact Number* </label> <div className="d-flex"> {/* autocomlete field for isdcodelist */} <Autocomplete ref={autocompleteRef} disablePortal id="isdcodelist" options={isdCodesList} isOptionEqualToValue={(option: any, value: any) => option.label === value.label} renderInput={(params) => ( <TextField {...params} {...register('isdCode', { required: true, })} className="isd-code-input" placeholder="+971" /> )} renderOption={(props, option) => ( <span className="phone-number-option" {...props} > {option.countryName} </span> )} // onchange event handler to set the isdCode state onChange={(e, value: any) => setIsdCode( value?.label, )} /> {/* handle errors */} {formErrors.isdCode && ( <span className="error-message">{formErrors.isdCode}</span> )} {/* company contact input */} <input type="text" className="form-control company-contact-number-input" id="companyContactNumber" placeholder="XXXXXXXXXXXXXX" onInput={(e) => { const input = e.target as HTMLInputElement; input.value = input.value.slice(0, 15).replace(/[^0-9 ]/g, ''); // Limit the input to 15 characters and Allow only digits and spaces setCompanyContactNumber(input.value); }} {...register('companyContactNumber', { required: true, })} /> {/* handle errors */} {formErrors.companyContactNumber && ( <span className="error-message">{formErrors.companyContactNumber}</span> )} </div> </div> """ consider you are react developer. client wants to achieve below changes in the form. 1. You have to display isdCode error below that particular autocomplete field. currently it is shown right to the field. Show it under field. 2. You have to display company contact number error below that particular field. currently it is shown right to the field. Show it under field. 3. make appropriate changes in the code and return the code.
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter