Bootstrap 4 проверка кредитной карты с пользовательскими сообщениями
Я использую проверку начальной загрузки 4. Как я могу подтвердить, номер кредитной карты должен быть числами и должен состоять из 16 цифр и показывать соответствующее сообщение?
Я хотел бы показать три отдельных сообщения. 1. Если введено примечание, "Требуется номер кредитной карты". 2. Если пользователь вводит "xyz и т. Д.", То "только цифры", 3. Если пользователь вводит меньше 16 цифр, то показывать сообщение как ""CC должно быть 16 цифры ". Как мы можем показать несколько пользовательских сообщений?
Пожалуйста, посмотрите на скрипку. Спасибо!
<html lang="en">
<head>
</head>
<body class="bg-light">
<form class="needs-validation" novalidate>
<div class="col-md-4 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required>
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
<script>
// Example 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');
// 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();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
2 ответа
Скрипка сломана, потому что jQuery не был включен. Добавьте шаблон кредитной карты HTML5 к входу, и Bootstrap 4 отобразит соответствующий invalid-feedback сообщение...
https://jsfiddle.net/uq4rb7zy/
<form class="needs-validation" novalidate="" method="POST">
<div class="col-md-4 mb-3">
<label for="cc-number">Credit card number</label>
<input type="text" class="form-control" id="cc-number" required="" pattern="[0-9]{16}">
<div class="invalid-feedback">
Credit card number is required and must be 16 digits
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
</form>
EDIT Bootstrap не предоставляет отдельных проверочных сообщений. Тем не менее, вы можете сделать что-то вроде этого с API проверки HTML5...
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
// 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();
var ele = form.getElementsByTagName("input")
for (var i = 0; i < ele.length; i++) {
var msg = "", reason = ele[i].validity;
if (reason.valueMissing) {
msg = ele[i].getAttribute("data-value-missing");
}
else if (reason.patternMismatch) {
msg = ele[i].getAttribute("data-pattern-mismatch");
}
else {
// other reason...
}
ele[i].nextElementSibling.innerText=msg;
}
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
А затем на входе добавить data-value-missing а также data-pattern-mismatch сообщение...
<input type="text" class="form-control" id="cc-number" required="" pattern="[0-9]{16}" data-value-missing="A credit card number is required" data-pattern-mismatch="The credit card number must be 16 digits">
<div class="invalid-feedback"></div>
Это будет предоставлять только различные сообщения для основанных на ValidityState (например, обязательный или шаблон). Это не будет соответствовать конкретным причинам сбоя шаблона (например, цифры против символов).
У меня есть этот скрипт для ограничения номера телефона и DNI (удостоверение личности из Испании)
<script>
// Funcion para limitar el numero de caracteres de un textarea o input
function limitar(e, contenido, caracteres)
{
var unicode=e.keyCode? e.keyCode : e.charCode;
if(unicode==8 || unicode==46 || unicode==13 || unicode==9 || unicode==37 || unicode==39 || unicode==38 || unicode==40)
return true;
// Si ha superado el limite de caracteres devolvemos false
if(contenido.length>=caracteres)
return false;
return true;
}
//Funcion ONLY NUMBERS
function numbersonly(myfield, e, dec){
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
$(function(){
if (!Modernizr.inputtypes.date) {
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-100:+0',
// Consistent format with the HTML5 picker
dateFormat : 'dd-mm-yy'
},
// Localization
$.datepicker.regional['es']
);
}
});
</script>
Проверьте код, убедитесь, что он работает, тогда вам просто нужно вызвать функцию на входе, как это
<input type="text" class="form-control" name="inputDNI" placeholder="DNI" onKeyUp="return limitar(event,this.value,9)" onKeyDown="return limitar(event,this.value,9)" required>