Проверка на корретность ввода
This commit is contained in:
parent
c0a31edd60
commit
4f2a40631c
@ -8,12 +8,37 @@ const SearchBar = () => {
|
||||
const [query, setQuery] = useState(''); // Поисковый запрос
|
||||
const [results, setResults] = useState([]); // Результаты поиска
|
||||
const [selectedStreet, setSelectedStreet] = useState(null); // Выбранная улица
|
||||
const [error, setError] = useState(''); // Сообщение об ошибке
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const value = e.target.value;
|
||||
|
||||
// Проверка на наличие цифр
|
||||
if (/\d/.test(value)) {
|
||||
setError('Ввод цифр запрещен. Пожалуйста, введите название улицы.');
|
||||
} else {
|
||||
setError('');
|
||||
}
|
||||
|
||||
setQuery(value);
|
||||
};
|
||||
|
||||
const handleSearch = async (e) => {
|
||||
e.preventDefault();
|
||||
const data = await searchStreet(query);
|
||||
setResults(data); // Установить результаты поиска
|
||||
setSelectedStreet(null); // Сбросить выбранный адрес
|
||||
|
||||
// Проверка перед выполнением поиска
|
||||
if (error) {
|
||||
alert('Исправьте ошибки перед поиском.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await searchStreet(query);
|
||||
setResults(data);
|
||||
setSelectedStreet(null);
|
||||
} catch (err) {
|
||||
setError('Ошибка поиска. Попробуйте снова.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@ -21,17 +46,20 @@ const SearchBar = () => {
|
||||
<form className="form-container d-flex mb-4" onSubmit={handleSearch}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
className={`form-control ${error ? 'is-invalid' : ''}`}
|
||||
placeholder="Введите название улицы"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onChange={handleInputChange}
|
||||
aria-label="Search"
|
||||
/>
|
||||
<button className="btn btn-outline-success" type="submit">
|
||||
<button className="btn btn-outline-success" type="submit" disabled={!!error}>
|
||||
Поиск
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Вывод сообщения об ошибке */}
|
||||
{error && <div className="invalid-feedback d-block">{error}</div>}
|
||||
|
||||
{selectedStreet ? (
|
||||
<div className="table-container">
|
||||
<h2>Информация об адресе</h2>
|
||||
|
Loading…
Reference in New Issue
Block a user