Хто знає, як я можу запустити стандартну перевірку HTML5 у формі, не використовуючи кнопку подати? (JavaScript або jQuery).
Я не хочу надсилати POST/GETзапит, лише виконую перевірку.
Відповіді:
Прийнята відповідь на це питання, здається, є тим, що ви шукаєте.
Короткий підсумок: у обробнику подій для надсилання телефонуйте event.preventDefault().
Після деяких досліджень я придумав такий код, який повинен бути відповіддю на ваше запитання. (Принаймні це спрацювало у мене)
Спочатку скористайтеся цим фрагментом коду. У $(document).readyпереконується код виконується , коли форма завантажується в DOM:
$(document).ready(function()
{
$('#theIdOfMyForm').submit(function(event){
if(!this.checkValidity())
{
event.preventDefault();
}
});
});
Тоді просто зателефонуйте $('#theIdOfMyForm').submit();своєму коду.
ОНОВЛЕННЯ
Якщо ви дійсно хочете показати, яке поле користувач помилився у формі, додайте наступний код після event.preventDefault();
$('#theIdOfMyForm :input:visible[required="required"]').each(function()
{
if(!this.validity.valid)
{
$(this).focus();
// break
return false;
}
});
Це дасть фокус на першому недійсному введенні.
Ви можете використовувати reportValidity , однак він поки не підтримує браузер. Він працює в Chrome, Opera та Firefox, але не в IE, а також в Edge чи Safari:
var myform = $("#my-form")[0];
if (!myform.checkValidity()) {
if (myform.reportValidity) {
myform.reportValidity();
} else {
//warn IE users somehow
}
}
( checkValidity має кращу підтримку, але не працює на IE <10.)
Вам потрібно подати форму, щоб перевірка html5 запрацювала. Є спосіб обійти це, щоб отримати те, що ви хочете. Подивіться код:
<body>
<h1>Validation Example</h1><br />
<h2>Insert just 1 digit<h2>
<form id="form" onsubmit="return false">
<label>Input<input type="text" pattern="[0-9]" id="input" /></label>
<input type="submit" class="hide" id="inputButton">
</form>
</body>
Дивіться приклад тут
Примітка: використання form.submit () не працювало для мене. Тож я створив приховану кнопку надсилання, яка запускається при клавіатурі. Не питайте мене чому. Можливо, хтось міг би це пояснити.
Це моя реалізація рішення, запропонованого @mhm, де я відкинув використання jQuery.
Змінна formId містить ідентифікатор форми, а msg - це об’єкт із повідомленнями мого додатка.
Ця реалізація намагається повідомити користувача власними повідомленнями про помилки HTML 5, якщо це неможливо, то попереджає про загальне повідомлення про помилку.
Якщо помилок немає, я подаю форму.
let applyForm = document.getElementById(formId);
if (!applyForm.checkValidity()) {
if (applyForm.reportValidity) {
applyForm.reportValidity();
} else {
alert(msg.ieErrorForm);
}
} else {
applyForm.submit();
}
Коротка відповідь, ні, немає можливості "запустити" функціональність за замовчуванням міхура html5 вбудованого перед подачею форми, ви можете checkValidity()на певних входах, але знову не працює так, як хотілося б. Якщо запобігти запобіганню за замовчуванням, якщо ви все одно хочете надіслати форму після завершення перевірки, ви все одно можете обробити цей стиль, виконавши наступне:
Зверніть увагу, що у формах, для яких ви не хочете застосовувати стилі перевірки css, ви можете просто додати novalidateатрибут до форми.
HTML:
<form name="login" id="loginForm" method="POST">
<input type="email" name="username" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<input type="submit" value="LOG IN" class="hero left clearBoth">
</form>
Якщо ви не використовуєте SCSS, я настійно рекомендую вивчити його, він набагато більш керований, простий у написанні та менш заплутаний. Примітка: У прикладі скрипки у мене є точний css, який буде скомпільовано. Я також включив приклад стилю бульбашок.
SCSS:
form:not([novalidate]) {
input, textarea {
&:required {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
&:required:valid {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
&:not(:focus):valid {box-shadow: none;border: 1px solid $g4;}
&:focus:invalid {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center; @include box-shadow(0 0 5px #d45252); border-color: #b03535}
}
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
&:after {
@include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
}
.cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}
JAVASCRIPT:
Тут ми можемо зробити щось забавне, щоб використовувати повідомлення за замовчуванням і успадковувати їх у вашому власному "міхурі" або вікні повідомлення про помилку.
var form = $('form');
var item = form.find(':invalid').first();
var node = item.get(0);
var pos = item.position();
var message = node.validationMessage || 'Invalid value.';
var bubble = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();
bubble.insertAfter(item);
ДЕМО:
http://jsfiddle.net/shannonhochkins/wJkVS/
Насолоджуйтесь, і я сподіваюся, що я допомагаю іншим у перевірці форми HTML5, оскільки це неймовірно, і йому потрібно потрапити туди!
Шеннон
Як зазначено в інших відповідях, використовуйте event.preventDefault (), щоб запобігти надсиланню форми.
Щоб перевірити форму, перш ніж я написав невелику функцію jQuery, ви можете використовувати (зверніть увагу, що елементу потрібен ідентифікатор!)
(function( $ ){
$.fn.isValid = function() {
return document.getElementById(this[0].id).checkValidity();
};
})( jQuery );
приклад використання
$('#submitBtn').click( function(e){
if ($('#registerForm').isValid()){
// do the request
} else {
e.preventDefault();
}
});
я використовував
objectName.addEventListener('click', function() {
event.preventDefault();
}
але його помилка шоу " подія невизначена ", тому в цьому випадку використовуйте параметр події типу
objectName.addEventListener('click', function(event) {
event.preventDefault();
}
зараз це працює нормально
Я знаю, що це стара тема, але коли існує дуже складний (особливо асинхронний) процес перевірки, існує просте обхідне рішення:
<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
var form1 = document.forms['form1']
if (!form1.checkValidity()) {
$("#form1_submit_hidden").click()
return
}
if (checkForVeryComplexValidation() === 'Ok') {
form1.submit()
} else {
alert('form is invalid')
}
}
</script>
Спробуйте HTMLFormElement.reportValidity (), де ця функція буде викликати перевірки вводу.