Проверка формы начальной загрузки только для одного поля - PullRequest
Новая
       52

Проверка формы начальной загрузки только для одного поля

0 голосов
/ 04 ноября 2019

У меня есть простая форма, которая состоит из поля электронной почты и поля пароля, как показано ниже 

          <Form noValidate validated={validated} onSubmit={this.handleSubmit}>

                    <Form.Group controlId="formEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" onChange={this.emailValidator} placeholder="Enter email" required />
                    </Form.Group>

                    <Form.Group controlId="formPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password"placeholder="Password" required />
                    </Form.Group>

                    <Button type="submit" size="lg" variant="light">
                     Login
                    </Button>


         </Form>

Я хочу включить проверку формы начальной загрузки в поле электронной почты, когда пользователь начинает вводить адрес электронной почты и валидациюв поле пароля, когда нажата кнопка отправки.

Мой подход был следующим: 

handleSubmit = event => {
        const { loggingUser } = this.props;
        const form = event.currentTarget;
        event.preventDefault();
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        } else {
            const loggingData = {
                "eMail": event.target.formEmail.value,
                "password": event.target.formPassword.value,
            }
            loggingUser(loggingData);
        }
        this.setState({
            validated: true
        })
    };

    emailValidator  = event =>{
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.setState({
            validated: true
        })
    }

Но когда я начинаю вводить в поле адреса электронной почты, обе проверки запускаются и показывают красныйграницы. Как я могу запустить проверку начальной загрузки для адреса электронной почты только тогда, когда пользователь начинает вводить адрес электронной почты.

1 Ответ

0 голосов
/ 04 ноября 2019

Вам следует попробовать эту форму начальной загрузки и некоторые js, и не забудьте включить Bootstrap css.

<. Link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" целостность =" sha384-ggOyR0iXCbMQv3Xipma34MD + dH /1fQ784 / j6cY / iJTQUOhcWr7x9JvoRxT2MZw1T "crossorigin =" anonymous "> 

(function() {
			'use strict';
			window.addEventListener('load', function() {
			var forms = document.getElementsByClassName('f-validation');
			var validation = Array.prototype.filter.call(forms, function(form) {
			form.addEventListener('submit', function(event) {
			if (form.checkValidity() === false) {
			event.preventDefault();
			event.stopPropagation();
			}
			form.classList.add('was-validated');
			}, false);
			});
			}, false);
			})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


			<div class="container mt-2">
				<form class="f-validation" novalidate>
					<div class="form-row">
						<div class="col-md-12 mb-3">
							<label for="validationCustomUsername">Email address</label>
							<div class="input-group">
								<input type="email" class="form-control" id="validationCustomUsername" placeholder="Username"
								aria-describedby="inputGroupPrepend" required>
								<div class="invalid-feedback">
									Please enter valid email id.
								</div>
							</div>
						</div>
					</div>
					<div class="form-row">
						<div class="col-md-12 mb-3">
							<label for="validationCustom03">Password</label>
							<input type="password" class="form-control" id="validationCustom03" placeholder="Password" required>
							<div class="invalid-feedback">
								Please enter password.
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="form-check">
							<input class="" type="checkbox" value="">
							<label class="">
								Remember me.
							</label>
						</div>
					</div>
					<button class="btn btn-primary btn-sm" type="submit">Submit form</button>
				</form>
			</div>
...