Как заставить проверку формы html5 без отправки ее через jQuery
У меня есть эта форма в моем приложении, и я отправлю ее через AJAX, но я хочу использовать HTML5 для проверки на стороне клиента. Поэтому я хочу иметь возможность принудительно выполнить проверку формы, возможно, через jQuery.
Я хочу активировать проверку без отправки формы. Возможно ли это?
Ответы
Ответ 1
Чтобы проверить, действительно ли определенное поле, используйте:
$('#myField')[0].checkValidity(); // returns true/false
Чтобы проверить правильность формы, используйте:
$('#myForm')[0].checkValidity(); // returns true/false
Если вы хотите отображать собственные сообщения об ошибках, которые имеют некоторые браузеры (например, Chrome), к сожалению, единственный способ сделать это - отправить форму, например:
var $myForm = $('#myForm');
if(! $myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find(':submit').click();
}
Надеюсь, это поможет. Имейте в виду, что проверка HTML5 не поддерживается во всех браузерах.
Ответ 2
Я нашел это решение работать на меня. Просто вызовите функцию JavaScript следующим образом:
action="javascript:myFunction();"
Тогда у вас есть проверка HTML5... действительно просто :-)
Ответ 3
Вот более общий способ, который немного чище:
Создайте свою форму как это (может быть фиктивная форма, которая ничего не делает):
<form class="validateDontSubmit">
...
Привязать все формы, которые вы действительно не хотите отправлять:
$(document).on('submit','.validateDontSubmit',function (e) {
//prevent the form from doing a submit
e.preventDefault();
return false;
})
Теперь скажем, что у вас есть <a> (внутри <form>), который при нажатии вы хотите проверить форму:
$('#myLink').click(function(e){
//Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
//has .validateDontSubmit class
var $theForm = $(this).closest('form');
//Some browsers don't implement checkValidity
if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
return;
}
//if you've gotten here - play on playa'
});
Несколько заметок здесь:
- Я заметил, что вам не нужно фактически отправлять форму для проверки - вызов
checkValidity() достаточно (по крайней мере, в хроме). Если другие могут добавлять комментарии при тестировании этой теории в других браузерах, я обновлю этот ответ.
- Вещь, которая запускает проверку, не должна находиться внутри
<form>. Это был просто чистый и гибкий способ решения общего назначения.
Ответ 4
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
от: проверка формы html5
Ответ 5
Может опаздывать на вечеринку, но все-таки я нашел этот вопрос, пытаясь решить подобную проблему. Поскольку ни один код с этой страницы не работал у меня, между тем я придумал решение, которое работает как указано.
Проблема заключается в том, что ваш <form> DOM содержит один элемент <button>, после того как он запущен, что <button> будет автоматически удаляться. Если вы играете с AJAX, вам, вероятно, необходимо предотвратить действие по умолчанию. Но есть улов: если вы это сделаете, вы также предотвратите базовую проверку HTML5. Следовательно, это хороший вызов для предотвращения по умолчанию на этой кнопке только в том случае, если форма действительна. В противном случае проверка HTML5 защитит вас от отправки. jQuery checkValidity() поможет с этим:
JQuery
$(document).ready(function() {
$('#buttonID').on('click', function(event) {
var isvalidate = $("#formID")[0].checkValidity();
if (isvalidate) {
event.preventDefault();
// HERE YOU CAN PUT YOUR AJAX CALL
}
});
});
Код, описанный выше, позволит вам использовать базовую проверку HTML5 (с сопоставлением типов и шаблонов) БЕЗ отправки формы.
Ответ 6
Вы говорите о двух разных вещах: "проверка HTML5" и валидация HTML-формы с помощью javascript/jquery.
HTML5 имеет встроенные опции для проверки формы. Например, использование "обязательного" атрибута в поле, которое может (на основе реализации браузера) скомпрометировать форму без использования javascript/jquery.
С javascrip/jquery вы можете сделать что-то вроде этого
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
Ответ 7
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
Ответ 8
Для этого вам не нужен jQuery. В вашей форме добавьте:
onsubmit="return buttonSubmit(this)
или в JavaScript:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
В вашей функции buttonSubmit (или, как вы ее называете) вы можете отправить форму с помощью AJAX. buttonSubmit вызывается только в том случае, если ваша форма проверена в HTML5.
В случае, если это кому-то поможет, вот моя функция buttonSubmit:
function buttonSubmit(e)
{
var ajax;
var formData = new FormData();
for (i = 0; i < e.elements.length; i++)
{
if (e.elements[i].type == "submit")
{
if (submitvalue == e.elements[i].value)
{
submit = e.elements[i];
submit.disabled = true;
}
}
else if (e.elements[i].type == "radio")
{
if (e.elements[i].checked)
formData.append(e.elements[i].name, e.elements[i].value);
}
else
formData.append(e.elements[i].name, e.elements[i].value);
}
formData.append("javascript", "javascript");
var action = e.action;
status = action.split('/').reverse()[0] + "-status";
ajax = new XMLHttpRequest();
ajax.addEventListener("load", manageLoad, false);
ajax.addEventListener("error", manageError, false);
ajax.open("POST", action);
ajax.send(formData);
return false;
}
Некоторые из моих форм содержат несколько кнопок отправки, поэтому это строка if (submitvalue == e.elements[i].value). Я устанавливаю значение submitvalue, используя событие click.
Ответ 9
Чтобы проверить все необходимые поля формы без кнопки отправки, вы можете использовать функцию ниже.
Вы должны назначить атрибут требуемый для элементов управления.
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
Ответ 10
У меня была довольно сложная ситуация, когда мне нужно несколько кнопок отправки, чтобы обрабатывать разные вещи. Например, "Сохранить и удалить".
Основа заключалась в том, что она также была ненавязчивой, поэтому я не мог просто сделать ее обычной кнопкой. Но также хотел использовать проверку html5.
Кроме того, событие отправки было отменено, если пользователь нажал клавишу ввода, чтобы вызвать ожидаемое представление по умолчанию; в этом примере сохраните.
Вот как мы работаем с обработкой формы, которая все еще работает с/без javascript и с проверкой html5, с моментами отправки и нажатия.
jsFiddle Demo - проверка HTML5 с переопределением отправки и клика
XHTML
<form>
<input type="text" required="required" value="" placeholder="test" />
<button type="submit" name="save">Save</button>
<button type="submit" name="delete">Delete</button>
</form>
JavaScript
//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
var isValid = null;
var form = $('form');
var submitButton = form.find('button[type="submit"]')
var saveButton = submitButton.filter('[name="save"]');
var deleteButton = submitButton.filter('[name="delete"]');
//submit form behavior
var submitForm = function(e){
console.log('form submit');
//prevent form from submitting valid or invalid
e.preventDefault();
//user clicked and the form was not valid
if(isValid === false){
isValid = null;
return false;
}
//user pressed enter, process as if they clicked save instead
saveButton.trigger('click');
};
//override submit button behavior
var submitClick = function(e){
//Test form validitiy (HTML5) and store it in a global variable so both functions can use it
isValid = form[0].checkValidity();
if(false === isValid){
//allow the browser default submit event behavior
return true;
}
//prevent default behavior
e.preventDefault();
//additional processing - $.ajax() etc
//.........
alert('Success');
};
//override submit form event
form.submit(submitForm);
//override submit button click event
submitButton.click(submitClick);
})(jQuery);
Предостережение, связанное с использованием Javascript, заключается в том, что он должен распространяться по событию отправки, чтобы он отображал сообщения об ошибках без поддержки каждого браузера в коде.
В противном случае, если событие click переопределено event.preventDefault() или возвращает false, оно никогда не будет распространяться на событие отправки браузера.
Следует отметить, что в некоторых браузерах не будет запускаться форма отправки при нажатии пользователем, вместо этого она будет запускать первую кнопку отправки в форме. Следовательно, есть console.log('form submit'), чтобы показать, что он не запускается.
Ответ 11
Вы можете сделать это, не отправив форму.
Например, если кнопка отправки формы с идентификатором "поиск" находится в другой форме. Вы можете вызвать событие click на этой кнопке отправки и после этого вызвать ev.preventDefault.
В моем случае я подтверждаю форму B из представления формы A.
Как этот
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
Ответ 12
Я знаю, что это уже ответили, но у меня есть другое возможное решение.
Если вы используете jquery, вы можете сделать это.
Сначала создайте пару расширений на jquery, чтобы вы могли использовать их по мере необходимости.
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
Далее сделайте что-то вроде этого, где вы хотите его использовать.
<script type="text/javascript">
/*if you want to validate the form on a submit call,
and you never want the form to be submitted via
a normal submit operation, or maybe you want handle it.
*/
$(function () {
$.bypassDefaultSubmit('form1', submit);
});
function submit(){
//do something, or nothing if you just want the validation
}
</script>
Ответ 13
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
Ответ 14
Это сработало для того, чтобы отобразить собственные сообщения об ошибках HTML 5 с проверкой формы.
<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>
$('#RegForm').on('submit', function ()
{
if (this.checkValidity() == false)
{
// if form is not valid show native error messages
return false;
}
else
{
// if form is valid , show please wait message and disable the button
$("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");
$(this).find(':submit').attr('disabled', 'disabled');
}
});
Примечание. RegForm - это form id.
Ссылка
Надежда помогает кому-то.
Ответ 15
Это довольно простой способ заставить HTML5 выполнять валидацию для любой формы, но при этом имеет современный JS-контроль над формой. Единственное предостережение - кнопка отправки должна находиться внутри <form>.
HTML
<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>
JS
// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );
function newAcctSubmit()
{
var myForm = jQuery( "#newUserForm" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
// post form with jQuery or whatever you want to do with a valid form!
var formVars = myForm.serialize();
etc...
}
Ответ 16
Этот способ хорошо работает для меня:
-
Добавьте атрибут onSubmit в form, не забудьте включить return в значение.
<form id='frm-contact' method='POST' action='' onSubmit="return contact()">
-
Определите функцию.
function contact(params) {
$.ajax({
url: 'sendmail.php',
type: "POST",
dataType: "json",
timeout: 5000,
data: { params:params },
success: function (data, textStatus, jqXHR) {
// callback
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR.responseText);
}
});
return false;
}
Ответ 17
код ниже работает для меня,
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
Ответ 18
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
не лучший ответ, но работает для меня.
Ответ 19
$(document).ready(function () {
var obj = {};
$("#click_radio").click(function () {
//Function to get the dropdown list using AJAX
$.ajax({
type: "get",
url: "json/droplist1.json",
dataType: "json",
success: function (res) {
populateDropDown1(res)
}
})
$.ajax({
type: "get",
url: "json/droplist2.json",
dataType: "json",
success: function (res) {
populateDropDown2(res)
}
})
$.ajax({
type: "get",
url: "json/droplist3.json",
dataType: "json",
success: function (res) {
populateDropDown3(res)
}
})
//Internal function to populate the dropdown list
function populateDropDown1(data) {
$.each(data, function (index, val) {
$("#list1").append('<option key=' + val.key + '>' + val.value + '</option>');
});
}
function populateDropDown2(data) {
$.each(data, function (index, val) {
$("#list2").append('<option key=' + val.key + '>' + val.value + '</option>');
});
}
function populateDropDown3(data) {
$.each(data, function (index, val) {
$("#list3").append('<option key=' + val.key + '>' + val.value + '</option>');
});
}
$('#person_form').show();
})
$("#submit").click(function (e) {
e.preventDefault();
var namefl = 0, numbf = 0;
var namef = $("#name").val();
var phnenumb = $("#numb").val();
var list11 = $("#list1").val();
var list12 = $("#list2").val();
var list13 = $("#list3").val();
localStorage.setItem('name', $("#name").val());
localStorage.setItem('number', $("#numb").val());
localStorage.setItem('list11', $("#list1").val());
localStorage.setItem('list12', $("#list2").val());
localStorage.setItem('list13', $("#list3").val());
if (namef.length < 2 || namef.length > 15) {
$("#nameerror").show();
namefl = 0;
}
else {
namefl = 1;
$("#nameerror").hide();
}
// if(phnenumb.length<10 || phnenumb.isNaN()){
// $("#name").addClass('error');
// }
// else{
// $("#name").removeClass('error');
// }
if (namefl == 1) {
$("#person_form").load("partials.html");
}
$.ajax({
type: "get",
dataType: "json",
url: "json/drag_droplist.json",
success: function (res) {
populateSecondPageList(res);
}
})
})
//populate data in the first list box
function populateSecondPageList(result) {
$.each(result, function (index, value) {
$("#draglist").append('<li draggable="true" ondragstart="drag(event)" id="drag' + index + '" class="list-item"><span class="key">' + value.key + ' </span><span class="value">' + value.value + '</span></li>');
})
}
$(document).on("click", "#submitList", function () {
var namef = localStorage.getItem('name');
var numb = localStorage.getItem('number');
var list1f = localStorage.getItem('list11');
var list2f = localStorage.getItem('list12');
var list3f = localStorage.getItem('list13');
var dropname = localStorage.setItem('drpval', sampleData.value);
var dropnam = localStorage.getItem('drpval');
var obj = { namef, numb, list1f, list2f, list3f, dropnam };
console.log(obj);
$.ajax({
type: "POST",
data: obj,
dataType: "json",
url: "https://reqres.in/api/users",
success: function (result) {
$("#myModal").modal('show');
$('#myModal .modal-body').html("<p>" + obj.namef + "</p> <p> " + obj.numb + "</p><p>" + obj.list1f + "</p><p>" + obj.list2f + "</p><p>" + obj.list3f + "</p><p>" + obj.dropnam + "</p>");
},
error: function (result) {
alert('error');
console.log(result);
}
});
})
});
//drag and drop
var dragleave = "";
var sampleData = {};
function allowDrop(ev) {
ev.preventDefault();
ev.target.innerHTML = "";
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
$(".list-unstyled li").css("display", "block");
ev.preventDefault();
// console.log(ev.target);
var data = ev.dataTransfer.getData("text");
// console.log(document.getElementById(data));
ev.target.innerHTML = document.getElementById(data).innerHTML;
$(".list-unstyled #" + data).css("display", "none");
//console.log($("#"+data).html());
if ($("#" + data).html()) {
sampleData = { "key": $("#" + data + " .key").html(), "value": $("#" + data + " .value").html() };
}
}
Ответ 20
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<label><input type="radio" id="click_radio" value="click">click</label>
</div>
<div class="row">
<div class="col-md-8" id="person_form">
<form>
<fieldset>
<p><strong>pick your colour</strong></p>
<div class="row">
<div class="col-md-4 form-group">
<label>color</label>
<select class="form-control" id="list1"></select>
</div>
<div class="col-md-4 form-group">
<label>sports</label>
<select class="form-control" id="list2"></select>
</div>
<div class="col-md-4 form-group">
<label>books</label>
<select class="form-control" id="list3"></select>
</div>
</div>
<div class="row">
<div class="col-md-6" >
<label class="col-md-12">name</label>
<input type="text" class="col-md-12 form-control" id="name">
<p id="nameerror"> This field is required</p>
</div>
<div class="col-md-6">
<label>phone number</label>
<input type="text" class="col-md-12 form-control" id="numb">
</div>
</div>
<div class="row">
<button class="btn btn-success pull-right" id="submit" type="submit">go to code</buttn>
</div>
</fieldset>
</form>
</div>
<div class="row second">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<ul id="draglist" class="list-unstyled">
</ul>
</div>
<div class="col-md-6">
<ul id="droplist" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="dragLeave(event)">
</ul>
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<button class="btn btn-success pull-right" id="submitList">Submit</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>You have successfully completed the application!!!</p>
</div>
<div class="modal-footer footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 pull-right">
<h1>Benefits</h1>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Ответ 21
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<title></title>
<style>
.div{
width:100px;
height:100px;
border:1px solid black;
}
#div1{
width:20px;
height:20px;
background: red;
}
#div2{
width:20px;
height:20px;
background: blue;
}
#div3{
width:20px;
height:20px;
background: black;
}
</style>
<script>
var initial="";
function allowDrop(e)
{
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData("div",e.target.id);
}
function drop(e)
{
e.preventDefault();
var data = e.dataTransfer.getData("div");
if(initial=="")
{
initial = $("#"+data);
e.target.appendChild($("#"+data)[0]);
}else{
$("#draghere").append(initial);
e.target.appendChild($("#"+data)[0]);
initial = $("#"+data);
}
}
// function drop(e)
// {
// e.preventDefault();
// var data = e.dataTransfer.getData("div");
// e.target.appendChild($("#"+data)[0]);
// }
$(document).ready(function(){
});
</script>
</head>
<body>
<div class="div" id="draghere" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="item" id="div1" draggable="true" ondragstart="drag(event)">
</div>
<!-- <div class="item" id="div2" draggable="true" ondragstart="drag(event)">
</div>
<div class="item" id="div3" draggable="true" ondragstart="drag(event)">
</div> -->
</div>
<div class="div" id="draghere1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<input type="text" name="asfa" id="tt" maxlength="10" onkeypress="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45" onpaste="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45">
</body>
</html>
Ответ 22
Я думаю, что лучший подход
будет использовать плагин jQuery Validation, который использует лучшие методы для проверки форм, а также имеет хорошую поддержку браузера. Так что вам не нужно беспокоиться о проблемах совместимости браузера.
И мы можем использовать функцию validation validation () jQuery, которая проверяет, является ли выбранная форма действительной или все выбранные элементы действительны без отправки формы.
<form id="myform">
<input type="text" name="name" required>
<br>
<button type="button">Validate!</button>
</form>
<script>
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
console.log( "Valid: " + form.valid() );
});
</script>
Ответ 23
В соответствии с вопросом, достоверность html5 должна быть проверена сначала с помощью jQuery, и в большинстве ответов этого не происходит, и причина этого заключается в следующем:
при проверке с использованием функции HTML5 формы по умолчанию
checkValidity();// returns true/false
мы должны понимать, что jQuery возвращает массив объектов, выбирая вот так
$("#myForm")
следовательно, вам нужно указать первый индекс, чтобы функция checkValidity() работала
$('#myForm')[0].checkValidity()
вот полное решение:
<button type="button" name="button" onclick="saveData()">Save</button>
function saveData()
{
if($('#myForm')[0].checkValidity()){
$.ajax({
type: "POST",
url: "save.php",
data: data,
success: function(resp){console.log("Response: "+resp);}
});
}
}
