Comment forcer une validation de formulaire html5 sans le soumettre via jQuery
J'ai ce formulaire dans mon application et je le soumettrai via AJAX, mais je souhaite utiliser HTML5 pour la validation côté client. Je veux donc pouvoir forcer la validation du formulaire, peut-être via jQuery.
Je veux déclencher la validation sans soumettre le formulaire. C'est possible?
Pour vérifier si un certain champ est valide, utilisez:
$('#myField')[0].checkValidity(); // returns true/false
Pour vérifier si le formulaire est valide, utilisez:
$('#myForm')[0].checkValidity(); // returns true/false
Si vous souhaitez afficher les messages d'erreur natifs de certains navigateurs (tels que Chrome), le seul moyen de le faire est malheureusement 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();
}
J'espère que cela t'aides. N'oubliez pas que la validation HTML5 n'est pas prise en charge par tous les navigateurs.
J'ai trouvé cette solution qui fonctionne pour moi. Appelez simplement une fonction javascript comme ceci:
action="javascript:myFunction();"
Ensuite, vous avez la validation html5 ... vraiment simple :-)
Voici une manière plus générale un peu plus propre:
Créez votre formulaire comme ceci (peut être un formulaire factice qui ne fait rien):
<form class="validateDontSubmit">
...
Liez 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;
})
Supposons maintenant que vous avez un <a> (dans le <form>) avec lequel vous souhaitez 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é qu'il n'est pas nécessaire de soumettre le formulaire pour que la validation se produise - l'appel à
checkValidity()suffit (au moins en chrome). Si d'autres personnes pouvaient ajouter des commentaires en testant cette théorie sur d'autres navigateurs, je mettrais à jour cette réponse. - La chose qui déclenche la validation ne doit pas nécessairement se trouver dans le
<form>. C’était juste un moyen propre et flexible d’avoir une solution polyvalente.
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
à partir de: validation de formulaire html5
Peut-être en retard pour le parti, mais pourtant, j'ai trouvé cette question tout en essayant de résoudre un problème similaire. Comme aucun code de cette page ne fonctionnait pour moi, je suis parvenu à une solution qui fonctionne comme spécifié.
Le problème est que votre DOM <form> contient un seul élément <button>; une fois déclenché, ce <button> sera automatiquement ajouté au formulaire. Si vous jouez avec AJAX, vous devrez probablement empêcher les actions par défaut. Mais il y a un problème: si vous le faites, vous empêcherez également la validation de base de HTML5. Par conséquent, il est conseillé d'appeler pour éviter les défauts sur ce bouton uniquement si le formulaire est valide. Autrement, la validation HTML5 vous protégera contre 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
}
});
});
Le code décrit ci-dessus vous permettra d’utiliser la validation HTML5 de base (avec correspondance du type et du modèle) SANS soumettre le formulaire.
Vous parlez de deux choses différentes: "validation HTML5" et validation du formulaire HTML à l'aide de javascript/jquery.
HTML5 "a" des options intégrées pour la validation d'un formulaire. Par exemple, utiliser l'attribut "obligatoire" sur un champ, ce qui pourrait (selon l'implémentation du navigateur) échouer lors de la soumission du formulaire sans utiliser javascript/jquery.
Avec javascrip/jquery vous pouvez faire quelque chose comme ceci
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
Vous n'avez pas besoin de jQuery pour y parvenir. Dans votre formulaire, ajoutez:
onsubmit="return buttonSubmit(this)
ou en JavaScript:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
Dans votre fonction buttonSubmit (ou comment vous l'appelez), vous pouvez soumettre le formulaire à l'aide d'AJAX. buttonSubmit ne sera appelé que si votre formulaire est validé en HTML5.
Si cela aide 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 de soumission, d'où cette ligne if (submitvalue == e.elements[i].value). J'ai défini la valeur de submitvalue à l'aide d'un événement click.
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
J'avais une situation assez complexe, où j'avais besoin de plusieurs boutons de soumission pour traiter différentes choses. Par exemple, Enregistrer et supprimer.
La base était que c'était aussi discret, donc je ne pouvais pas en faire un bouton normal. Mais je voulais aussi utiliser la validation html5.
De plus, l'événement de soumission a été remplacé si l'utilisateur a appuyé sur Entrée pour déclencher la soumission par défaut attendue. dans cet exemple, sauvegardez.
Voici les efforts du traitement du formulaire pour continuer à fonctionner avec/sans javascript et avec la validation html5, avec les événements submit et click.
Démo jsFiddle - Validation HTML5 avec substitutions de clic et de clic
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);
L'avantage d'utiliser Javascript est que le navigateur par défaut onclick doit se propager à l'événement submit DOIT avoir lieu afin d'afficher les messages d'erreur sans supporter chaque navigateur dans votre code . Sinon, si l'événement click est remplacé par event.preventDefault () ou return false, il ne sera jamais propagé à l'événement submit du navigateur.
La chose à souligner est que dans certains navigateurs ne déclenchera pas l'envoi du formulaire lorsque l'utilisateur appuiera sur Entrée, mais déclenchera le premier bouton d'envoi du formulaire. Il existe donc un fichier console.log ('form submit') pour montrer qu'il ne se déclenche pas.
Vous pouvez le faire sans soumettre le formulaire.
Par exemple, si le bouton d'envoi de formulaire avec l'id "recherche" se trouve dans l'autre formulaire. Vous pouvez appeler l'événement click sur ce bouton d'envoi et appeler ev.preventDefault par la suite . Pour mon cas, je valide le formulaire B à partir du formulaire A soumission ..__
function validateFormB(ev){ // DOM Event object
//search is in Form A
$("#search").click();
ev.preventDefault();
//Form B validation from here on
}
Pour vérifier tous les champs obligatoires du formulaire sans utiliser le bouton Soumettre, vous pouvez utiliser la fonction ci-dessous.
Vous devez affecter required attribut aux contrôles.
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
le code ci-dessous fonctionne pour moi,
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
Il s’agit d’une manière assez simple d’avoir que HTML5 effectue la validation de tout formulaire, tout en maintenant un contrôle JS moderne sur le formulaire. Le seul inconvénient est que le bouton d'envoi doit être à 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...
}
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.
Commencez par créer quelques extensions sur jquery afin de pouvoir les réutiliser au besoin.
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
Faites ensuite quelque chose comme ceci 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>
$(document).on("submit", false);
submitButton.click(function(e) {
if (form.checkValidity()) {
form.submit();
}
});
Selon la question, la validité html5 devrait être validée en utilisant jQuery au début et dans la plupart des réponses, cela n’est pas le cas et la raison en est la suivante:
lors de la validation à l'aide de la fonction par défaut du formulaire html5
checkValidity();// returns true/false
nous devons comprendre que jQuery retourne un tableau d'objets, en sélectionnant comme ceci
$("#myForm")
par conséquent, vous devez spécifier le premier index pour que la fonction checkValidity () fonctionne
$('#myForm')[0].checkValidity()
voici la solution complète:
<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);}
});
}
}
<!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>
Cela fonctionne bien pour moi:
Ajoutez l'attribut
onSubmitdans votreform, n'oubliez pas d'inclurereturndans la valeur.<form id='frm-contact' method='POST' action='' onSubmit="return contact()">Définir 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; }
Je pense que la meilleure approche
utilisera jQuery Validation plugin qui utilise les meilleures pratiques pour la validation de formulaire et prend également en charge les navigateurs. Vous n'avez donc pas à vous soucier des problèmes de compatibilité de navigateur.
Et nous pouvons utiliser la fonction de validation jQuery valid () qui vérifie si le formulaire sélectionné est valide ou si tous les éléments sélectionnés sont valides sans soumettre le formulaire.
<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>
<!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>
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });
pas une meilleure réponse mais fonctionne pour moi.
$(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() };
}
}