Comment forcer la validation d'un formulaire html5 sans le soumettre via jQuery
j'ai ce formulaire dans mon application et je le soumettrai via AJAX, mais je veux utiliser HTML5 pour la validation côté client. Donc je veux être capable de forcer la validation du formulaire, peut-être via jQuery.
je veux déclencher la validation sans soumettre le formulaire. Est-il possible?
20 réponses
Pour vérifier si un champ est valide, utilisez:
$('#myField')[0].checkValidity(); // returns true/false
pour vérifier la validité du formulaire, utilisez:
$('#myForm')[0].checkValidity(); // returns true/false
si vous voulez afficher les messages d'erreur natifs que certains navigateurs ont (comme Chrome), malheureusement la seule façon de le faire est de soumettre le formulaire, comme ceci:
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();
}
Espérons que cette aide. Gardez à l'esprit que la validation HTML5 n'est pas prise en charge par tous les navigateurs.
j'ai trouvé cette solution pour travailler pour moi. Il suffit d'appeler une fonction javascript avec ceci: action= " javascript: myFunction();" Vous avez alors la validation html5... really simple : -)
Voici une façon plus générale qui est un peu plus propre:
créer votre forme comme ceci (peut être une forme factice qui ne fait rien):
<form class="validateDontSubmit">
...
lient tous les formulaires que vous ne voulez pas vraiment soumettre:
$(document).on('submit','.validateDontSubmit',function (e) {
//prevent the form from doing a submit
e.preventDefault();
return false;
})
permet maintenant de dire que vous avez un <a> (dans le <form> ) que sur le clic vous voulez valider le formulaire:
$('#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'
});
quelques notes ici:
- j'ai remarqué que vous n'avez pas à soumettre le formulaire pour validation - l'appel à
checkValidity()est suffisant (au moins dans chrome). Si d'autres peuvent ajouter des commentaires en testant cette théorie sur d'autres navigateurs, je mettrai à jour cette réponse. - la chose qui déclenche la validation ne doit pas nécessairement se trouver à l'intérieur du
<form>. C'était juste un endroit propre et flexible pour une solution..
peut être en retard pour le parti, mais pourtant j'ai trouvé cette question tout en essayant de résoudre le même problème. Comme aucun code de cette page n'a fonctionné pour moi, en attendant j'ai trouvé une solution qui fonctionne comme spécifié.
problème est lorsque votre <form> DOM contiennent un seul <button> élément, une fois allumé, que <button> sumbit automatiquement forme. Si vous jouez avec AJAX, vous devez probablement empêcher l'action par défaut. Mais il y a un hic: si vous le faites, vous empêchera également la validation HTML5 de base. Par conséquent, il est bon de prévenir les défauts sur ce bouton seulement si le formulaire est valide. Sinon, la validation HTML5 vous protégera de la soumission. jQuery checkValidity() aidera avec ceci:
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
}
});
});
décrit ci-dessus vous permettra d'utiliser la validation HTML5 de base (avec correspondance type et motif) sans soumettre de formulaire.
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
vous parlez de deux choses différentes" validation HTML5 " et validation du formulaire HTML en utilisant javascript/jquery.
HTML5" a " des options intégrées pour valider un formulaire. Tel que l'utilisation de l'attribut "requis" sur un champ, qui pourrait (basé sur l'implémentation du navigateur) échouer la soumission du formulaire sans utiliser javascript/jquery.
avec javascrip / jquery vous pouvez faire quelque chose comme ça""
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
vous n'avez pas besoin de jQuery pour y arriver. Dans votre forme ajouter:
onsubmit="return buttonSubmit(this)
ou en JavaScript:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
dans votre fonction buttonSubmit (ou peu importe comment vous l'appelez), vous pouvez soumettre le formulaire en utilisant AJAX. buttonSubmit ne sera appelé que si votre formulaire est validé en HTML5.
au cas où cela aiderait quelqu'un, voici ma fonction 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;
}
Certains de mes formulaires contiennent plusieurs boutons soumettre, d'où cette ligne if (submitvalue == e.elements[i].value) . J'ai défini la valeur de submitvalue en utilisant un événement de clic.
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
pour vérifier tous les champs de formulaire requis sans utiliser le bouton Soumettre, vous pouvez utiliser la fonction ci-dessous.
vous devez attribuer l'attribut requis aux commandes.
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
j'ai eu une situation assez complexe, où j'ai eu besoin de plusieurs boutons Soumettre pour traiter des choses différentes. Par exemple, Enregistrer et Supprimer.
la base était que c'était aussi discret, donc je ne pouvais pas juste en faire un bouton normal. Mais aussi voulu utiliser la validation html5.
ainsi que l'événement soumettre a été dépassé dans le cas où l'Utilisateur a pressé enter pour déclencher la soumission par défaut attendue; dans cet exemple enregistrer.
Voici les efforts du traitement du formulaire pour continuer à travailler avec/sans javascript et avec la validation html5, avec les deux événements soumettre et cliquer.
jsFiddle Démo - la validation HTML5 avec soumettre et cliquez sur les remplacements
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's 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);
la mise en garde à L'utilisation de Javascript est que le navigateur par défaut onclick doit se propager à l'événement soumettre doit se produire afin d'afficher les messages d'erreur sans soutenir chaque navigateur dans votre code. Sinon, si l'événement click est écrasé par event.preventDefault () ou return false ne se propagera jamais à l'événement submit du navigateur.
la chose à souligner est que dans certains navigateurs ne sera pas déclencher le formulaire Soumettre lorsque l'utilisateur appuie sur Entrée, au lieu de cela, il activera le premier bouton Soumettre dans le formulaire. Il y a donc une console.log ("formulaire de soumission") pour montrer qu'il ne déclenche pas.
Vous pouvez le faire sans soumettre le formulaire.
Par exemple, si le formulaire de soumission bouton avec l'id "recherche" est dans l'autre forme . Vous pouvez appeler l'événement de clic sur ce bouton Soumettre et appeler ev.préventdefault après cela. Pour mon cas, je valide le formulaire B à partir du formulaire A. Comme ceci
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
je sais que cela a déjà été répondu, mais j'ai une autre solution possible.
si vous utilisez jquery, vous pouvez le faire.
créez D'abord quelques extensions sur jquery pour que vous puissiez les réutiliser au besoin.
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
Suivant faire quelque chose comme ça où vous voulez l'utiliser.
<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>
c'est une façon assez simple d'avoir HTML5 effectuer la validation pour n'importe quelle forme, tout en ayant le contrôle js moderne sur la forme. La seule mise en garde est que le bouton Soumettre doit se trouver à l'intérieur du <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...
}
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
ce n'est pas une bonne réponse mais ça marche pour moi.
ce formulaire travaillé me à afficher les messages D'erreur natifs HTML 5 avec validation du formulaire.
<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');
}
});
Note: RegForm est le form id .
Hope aide quelqu'un.
$(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() };
}
}
<!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>
<!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>
de Cette façon, fonctionne bien pour moi:
-
ajouter
onSubmitattribut dans votreform, n'oubliez pas d'inclurereturndans la valeur.<form id='frm-contact' method='POST' action='' onSubmit="return contact()"> -
définit la fonction.
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; }