THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.
In this tutorial, you will learn how to do input type url form validation in the reactjs application.
You can see the full code on Github
Other versions available:
We will create react application using the create-react-app tool to run the application.
npx create-react-app react-input-form
Now, let’s run the application
cd react-input-form
npm run start
It starts the application and opens localhost:3000
Input type url regular expression validation in reactjs
This example explains valid website URLs on change event handlers.
Here are steps for adding validation
Create a component folder in src folder
Lets create a Form a component named as
InputUrlComponentAdd form element inside a render function
Create
<input>element withtype=urlinsideformCreate a button to handle submit functionality
Attach
onChangebind event to input elementCreate a two variables
websiteurlfor holding input url, isValid value to check validation succesful or not.create a state object and initialize default values for
websiteurland isValid=false inside a constructor of a form component as seen belowconstructor(props) { super(props); this.state = { websiteUrl: "", isValid: false } }form input
valueis bounded to the state values as seen below
<input type="text" name="websiteUrl" value={websiteUrl}
- we need to handle the user entered data on the input field, Otherwise, typed data is not shown, So added the
onChangeevent handler with the `changeUrl’ function
onChange={this.changeUrl}
OnChange handler in reactbeing called while user typing the text. This will call changeUrl function defined as follows
changeUrl = e => {
const { value } = e.target;
const isValid = !value || this.validateWebsiteUrl(value);
this.setState({
websiteUrl: value,
isValid
});
};
This saves the entered url value and checks validation logic, stores the validation result as well as entered url.
- Let’s define the validation logic for url
validateWebsiteUrl = websiteUrl => {
const urlRegEx =
'[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?';
return urlRegEx.test(String(websiteUrl).toLowerCase());
};
Defined regular expression pattern for URL
This will check websiteUrl against regular expression using the test method
return true, if url is valid, else false
- Displayed error text in red color if isValid=false
- Disabled if entered URL is invalid
Complete code for handing input type form validation
import React, { Component } from "react";
class InputUrlComponent extends Component {
state = {
websiteUrl: "",
isValid: false
};
validateWebsiteUrl = websiteUrl => {
const urlRegEx =
'[-a-zA-Z0-9@:%_+.~#?&//=]{2,256}(.[a-z]{2,4})?\b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?';
return urlRegEx.test(String(websiteUrl).toLowerCase());
};
changeUrl = e => {
const { value } = e.target;
const isValid = !value || this.validateWebsiteUrl(value);
this.setState({
websiteUrl: value,
isValid
});
};
submitForm = () => {
const { websiteUrl } = this.state;
console.log("Website URL", websiteUrl);
};
render() {
const { isValid, websiteUrl } = this.state;
return (
<div className="App">
<form>
<input
type="text"
name="websiteUrl"
value={websiteUrl}
onChange={this.changeUrl}
/>
{!this.state.isValid && (
<div style={{ color: "red" }}>URL is invalid</div>
)}
<br></br>
<button onClick={this.submitForm} disabled={!isValid}>
Submit
</button>
</form>
</div>
);
}
}
export default InputUrlComponent;
InputUrlcomponent is called in App.js, here is the file.
import "./App.css";
import InputUrl from './components/Input-url';
function App() {
return (
<div className="App">
<h1>React Input type url pattern validation example</h1>
<InputUrl />
</div>
);
}
export default App;
Here is the output you have seen on the screen.
