Как я могу проверить Мобильный №. в Bootstrap 4 с использованием проверки ограничений? - PullRequest
Новая
       2

Как я могу проверить Мобильный №. в Bootstrap 4 с использованием проверки ограничений?

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

Вот код, который я использовал для создания формы. По сути, мне нужно проверить номер мобильного телефона на стороне клиента, используя проверку ограничений. Кроме того, сообщение об ошибке должно отображаться во время ввода данных пользователем. Я использовал mdboostrap. oninput="check(this)" вызывает функцию. Мне нужно нет. цифр должен быть равен 10. Вот кодекс для редактирования.

https://codepen.io/aditya-jangid/pen/PxwNRV.

function check(input) {

    }

Мне нужно написать функцию, как указано выше.

1 Ответ

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

Вы можете добавить атрибут шаблона, чтобы получить номер. цифр должен быть равен 10 

<input type="tel" pattern=".{10}" class="form-control" id="validationCustom08" placeholder="Mobile" oninput="check(this)" required>

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

// Starter JavaScript for disabling form submissions if there are invalid fields
		(function () {
			'use strict';
			window.addEventListener('load', function () {
				// Fetch all the forms we want to apply custom Bootstrap validation styles to
				var forms = document.getElementsByClassName('needs-validation');
        var tel = document.querySelector('input[type="tel"]');
        
				// Loop over them and prevent submission
				var validation = Array.prototype.filter.call(forms, function (form) {
					form.addEventListener('submit', function (event) {
						if (form.checkValidity() === false) {
							event.preventDefault();
							event.stopPropagation();
						}
            if(!check(tel.value)){
              event.preventDefault();
							event.stopPropagation();
              alert('error on phone')
            }
						form.classList.add('was-validated');
					}, false);
				});
			}, false);


		})();

function check(input) {
  if(input.length != 10)
    return false;
  return true;
}
.wrapper {
			margin: 5% auto;
			background-color: #FFF;
			box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px -2px rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.2);
			padding: 20px;
			max-width: 600px;
		}

		body {
			background: url('http://www.baltana.com/files/wallpapers-5/Blue-Background-HQ-Desktop-Wallpaper-16270.jpg');
		}
<!DOCTYPE html>
<html>

<head>
	<title>Register</title>
	<!-- Font Awesome -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<!-- Bootstrap core CSS -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
	<!-- Material Design Bootstrap -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/css/mdb.min.css" rel="stylesheet">
</head>

<body>
	<div class="wrapper">
		<div class="container">
			<form class="needs-validation" novalidate>
				<div class="form-row">
					<div class="col-md-6 mb-3">
						<label for="validationCustom01">First name</label>
						<input type="text" class="form-control" id="validationCustom01" placeholder="First name" required>
						<div class="valid-feedback">
							Looks good!
						</div>
						<div class="invalid-feedback">
							This Field cannot be empty.
						</div>
					</div>
					<div class="col-md-6 mb-3">
						<label for="validationCustom02">Last name</label>
						<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" required>
						<div class="valid-feedback">
							Looks good!
						</div>
						<div class="invalid-feedback">
							This Field cannot be empty.
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustomUsername">Username</label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text" id="inputGroupPrepend">@</span>
							</div>
							<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend"
							 required>
							<div class="invalid-feedback">
								Please choose a username.
							</div>
						</div>
					</div>
				</div>
				<div class="form-row">
					<div class="col-md-12 mb-3">
						<label for="validationCustom03">Address</label>
						<input type="textarea" class="form-control" id="validationCustom03" placeholder="Address" required>
						<div class="invalid-feedback">
							This field is required.
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustom04">City</label>
						<input type="text" class="form-control" id="validationCustom04" placeholder="City" required>
						<div class="invalid-feedback">
							Please provide a valid city.
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustom05">State</label>
						<input type="text" class="form-control" id="validationCustom05" placeholder="State" required>
						<div class="invalid-feedback">
							Please provide a valid state.
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustom06">Zip</label>
						<input type="number" class="form-control" id="validationCustom06" placeholder="Zip" oninput="checkzip(this)"
						 required maxlength="6">
						<div class="invalid-feedback">
							Please provide a valid zip.
						</div>
					</div>
				</div>
				<div class="form-row">
					<div class="col-md-4 mb-3">
						<label for="validationCustom07">Country Code</label>
						<select class="form-control" id="validationCustom07" required>
							<option data-countryCode="IN" value="91">India (+91)</option>
							<option disabled="disabled">Other Countries</option>
							<option data-countryCode="US" value="1">USA (+1)</option>
							<option data-countryCode="GB" value="44">UK (+44)</option>
						</select>
						<div class="invalid-feedback">
							Please Select a valid option.
						</div>
					</div>
					<div class="col-md-8 mb-3">
						<label for="validationCustom08">Mobile</label>
						<input type="tel" class="form-control" id="validationCustom08" placeholder="Mobile" oninput="check(this)"
						 required>
						<div class="valid-feedback">
							Looks Good!.
						</div>
						<div class="invalid-feedback">
							Please provide a valid number.
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustom09">Gender</label>
						<div class="custom-control custom-radio">
							<input type="radio" class="custom-control-input" id="male" name="gender" checked>
							<label class="custom-control-label" for="male">Male</label>
						</div>
						<div class="custom-control custom-radio">
							<input type="radio" class="custom-control-input" id="female" name="gender">
							<label class="custom-control-label" for="female">Female</label>
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustom10">Password</label>
						<input type="password" class="form-control" id="validationCustom10" placeholder="Password" required minlength="8"
						 pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$">
						<div class="invalid-feedback">
							Only numbers, Uppercase and Lowercase and Length greater than 8.
						</div>
					</div>
					<div class="col-md-12 mb-3">
						<label for="validationCustom11">Email</label>
						<input type="email" class="form-control" id="validationCustom11" placeholder="Email" oninput="checkemail(this)"
						 required>
						<div class="invalid-feedback">
							Please Enter a valid email ID
						</div>
					</div>
				</div>
				<div class="form-group">
					<div class="form-check pl-0">
						<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
						<label class="form-check-label" for="invalidCheck">
							Agree to terms and conditions
						</label>
						<div class="invalid-feedback">
							You must agree before submitting.
						</div>
					</div>
				</div>
				<button class="btn btn-primary" type="submit">Submit form</button>
			</form>
		</div>
	</div>
	<!-- JQuery -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- Bootstrap tooltips -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
	<!-- Bootstrap core JavaScript -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
	<!-- MDB core JavaScript -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.9/js/mdb.min.js"></script>

</body>

</html>

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...