React form w/ custom validation submit to PHP - reactjs

Question

How can I add basic validation to this form in React in which prevents default submit. I have found many examples but none that help me to implement the validation to my existing code.
``import React from "react";
export default function App() {
return (
<form method="POST" action="/example.php">
<input name="Username" required type="text" />
<input required name="Password" type="Password" />
<button type="submit" className="btn-login" />
</form>
);
}``

Answer 1

First you need to handle onSubmit and call event.preventDefault()— this is to prevent the default submit:
export default function App() {
handleSubmit = event => {
event.preventDefault();
}
return (
<form onSubmit={ handleSubmit }>
...
</form>
);
}
After that, you can use the Constraint Validation API. Essentially it works by checking that the input provided by the user satisfies all the constraints you define in your HTML.
For example, let's say you'd like the Username to always be present and only contain upper and lowercase letters.
Here's a full example in React (browser):
function App() {
const handleSubmit = event => {
event.preventDefault();
const form = event.target;
const nameInput = document.querySelector('[name="Username"]');
nameInput.addEventListener('input', () => {
nameInput.setCustomValidity('');
nameInput.checkValidity();
});
nameInput.addEventListener('invalid', () => {
if (nameInput.value === '') {
nameInput.setCustomValidity('Enter your username!');
} else {
nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
}
});
}
return (
<form method="POST" action="/example.php" onSubmit={ handleSubmit }>
<input name="Username" required type="text" pattern="[A-Za-z]+" />
<input required name="Password" type="Password" />
<input type="submit" className="btn-login" />
</form>
);
}
ReactDOM.render(
<App />,
document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Notice how I added pattern="[A-Za-z]+" to the Username field. Simple and declarative.
By the way, you may also want to use AJAX to POST the data to /example.php—nowadays you can use the Fetch API, it's present in all modern browsers.