Check if the website exists and if not then display Error message under the Form Input Field

Dakshak

I'm fairly new to JS & React and I'm using React Hook Form I have to check if the Website entered into the Website field in my form exists or not. If the URL doesn't exist I have to show an error message as "Website not available" under the Website field which will get rendered using a FormError component.

This is how it looks if Error is generated

(This is a First Name field but since I'm using a common TextField Component it should work here as well)

So, I'm using "url-exists" package to test if a website URL exists and if the website doesn't exists it should generate an error as "Website not available".

I'm using this code to implement.

const websiteCheck = (value) => {
  let str = value;
  let message = "";
    let urlCheck = str.indexOf("http://") == 0 || str.indexOf("https://") == 0;
    if (!urlCheck) {
        console.log("Protocol doesn't exist!");
        str = "http://" + str;
    } else {
        console.log("Protocol exists!");
    }
    urlExists(str, function (err:any, exists:any) {
      if (!exists) {
        message = "Website doesn't exists!" //Just for testing
        console.log("Not available: ", str, exists);
      } else {
        message = "Website exists!"
        console.log("Available: ", str, exists);
    }
        // console.log(exists); // true
    });
  return message;
}

And I'm calling it as :

return(
.....
 <TextField
        key={fieldName}
        id={fieldName}
        .......
        inputRef={register({
            websiteCheck(value)
       ........
 />

This should ideally work but it's giving me "Not available" message in console.log() even if I enter a correct & valid URL. And it still won't render the message I set.

What I found so far from debugging is :

  1. When I submit my form my entered URL is accepted but it won't enter my if(!exists)..else block and I get "Not available" in console.
  2. The second time it's submitting null value (or space idk) which enters the if(!exists)...else block and also says "Not available"

What should I do to get this resolved?

knoefel

You have to correct a few things here to make it work:

  • you should use <Controller /> when using a Material UI <TextField />, see this section in the docs for more infos about it
  • you need to use the validate function provided by RHF via the rules prop of the <Controller />, check here for all validation options (register and rules use the same interface for validations)
  • urlExists uses a callback, so you need to wrap the call to urlExists into a Promise and set it as the return value of your websiteCheck function. Right now you are returning a string before the callback is even executed. The important thing here is to also make your websiteCheck function async, so that the Promise will get resolved (the validate function from RHF supports using a async function)
  • it's also important to note, that you have to return true for the validate function if the entered value is correct. If not use a string for the error message

Edit React Hook Form - MUI Textfield Validation

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Check input of form field - if postcode exists, alert javascript

how to display form errors under input field with php and javascript

Display mat-form-field error message before control is touched

How to display an error message when a field is empty in a native script form?

Detect the error message in the input field

display ajax information under input field

Unable to get an error message to display if a folder exists

Can I apply a custom error message under an Antd input field on submit if a certain logic does not pass?

How to print error message under respective input field using javascript validation in php

Display form error message on form page

How to Check if data exists with in the database and display error

Check if a form field exists when doing form validation? Laravel 5

How to make error message to display for that particular input field using angular2

jQuery validate post error message under input

Make input field display form text

How to display an error message of a select field in laravel

Display error message on invalid special field

Validation error message for password field not display in Vuejs?

How to display an error message over a field

How not to display an error message if the field was not touched?

How to make django form.errors display only error and not input field affected

Python check if website exists

display error message after submitting a form

How to display an error message within the form

Rails Form_with display inline error message

How to check whether field exists in symfony2 form?

How to disable form if value exists in input field using jquery?

Why display an error on the registration form for the "password field"?

PHP SQL Check if form input exists in other table, then continue