Comment forcer une validation de formulaire html5 sans la soumettre via jQuery

J'ai ce formulaire dans mon application et je vais le soumettre via AJAX, mais je veux utiliser HTML5 pour la validation côté client. Je veux donc pouvoir forcer la validation du formulaire, peut-être via jQuery.

Je souhaite 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), 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();
}

J'espère que cela t'aides. N'oubliez pas que la validation HTML5 n'est pas prise en charge dans tous les navigateurs.

J'ai trouvé que cette solution fonctionnait pour moi. Appelez simplement une fonction javascript comme celle-ci:

action="javascript:myFunction();"

Ensuite, vous avez la validation html5 ... vraiment simple :-)

    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

de: validation de formulaire html5

le code ci-dessous fonctionne pour moi,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

Voici une manière plus générale qui est 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 ayez un <a>(dans le <form>) que vous souhaitez valider le formulaire au clic:

$('#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 que la validation se produise - l'appel à checkValidity()est suffisant (au moins en chrome). Si d'autres pouvaient 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 n'a pas besoin d'être dans le <form>. C'était juste un moyen propre et flexible d'avoir une solution à usage général.

Peut-être en retard à la fête, mais j'ai trouvé cette question en essayant de résoudre un problème similaire. Comme aucun code de cette page ne fonctionnait pour moi, entre-temps, j'ai trouvé une solution qui fonctionne comme spécifié.

Le problème est lorsque votre <form>DOM contient un seul <button>élément, une fois déclenché, qui <button>se résumera automatiquement sous forme. Si vous jouez avec AJAX, vous devrez probablement empêcher une action par défaut. Mais il y a un hic: si vous le faites, vous empêcherez également la validation HTML5 de base. Par conséquent, il est judicieux de ne prévenir les valeurs par défaut de ce bouton que si le formulaire est valide. Sinon, la validation HTML5 vous protégera de la soumission. jQuery vous 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 de type et de modèle) SANS soumettre de formulaire.

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. Telles que l'utilisation de l'attribut "requis" sur un champ, qui pourrait (selon 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;
});

var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}

Pour vérifier tous les champs obligatoires du formulaire sans utiliser le bouton soumettre, vous pouvez utiliser la fonction ci-dessous.

Vous devez attribuer l' attribut requis aux contrôles.

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });

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 buttonSubmitfonction (ou comme vous l'appelez), vous pouvez soumettre le formulaire en utilisant AJAX. buttonSubmitne sera appelé que si votre formulaire est validé en HTML5.

Au cas où cela aiderait quelqu'un, voici ma buttonSubmitfonction:

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 d'envoi, d'où cette ligne if (submitvalue == e.elements[i].value). J'ai défini la valeur de l' submitvalueutilisation d'un événement de clic.

J'ai eu 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 qu'il était également discret, donc je ne pouvais pas simplement en faire un bouton normal. Mais je voulais également utiliser la validation html5.

De plus, l'événement de soumission a été remplacé au cas où l'utilisateur aurait appuyé sur Entrée pour déclencher la soumission par défaut attendue; dans cet exemple, enregistrez.

Voici les efforts du traitement du formulaire pour continuer à fonctionner avec / sans javascript et avec la validation html5, avec des événements de soumission et de clic.

Démo jsFiddle - Validation HTML5 avec soumissions et clics

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 onclick par défaut du navigateur doit se propager à l'événement de soumission DOIT se produire afin d'afficher les messages d'erreur sans prendre en charge chaque navigateur dans votre code. Sinon, si l'événement click est remplacé par event.preventDefault () ou renvoie false, il ne se propagera jamais à l'événement submit du navigateur.

La chose à noter est que dans certains navigateurs ne déclenchera pas le formulaire soumis lorsque l'utilisateur appuie sur entrée, il déclenchera plutôt le premier bouton de soumission du formulaire. Il y a 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 du 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 après cela. Pour mon cas, je valide le formulaire B à partir du formulaire A. Comme ça

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}

Cette façon fonctionne bien pour moi:

1. Ajoutez un onSubmitattribut dans votre form, n'oubliez pas d'inclure returndans la valeur.

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">

2. Définissez 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;
   }

$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

pas une meilleure réponse mais fonctionne pour moi.

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 afin de pouvoir les réutiliser au besoin.

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Ensuite, faites 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>

$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});

Cela m'a permis d' afficher les messages d'erreur HTML 5 natifs 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');

}


});

Remarque: RegForm est le form id.

Référence

L'espoir aide quelqu'un.

C'est un moyen assez simple de demander à HTML5 d'effectuer la validation pour n'importe quel formulaire, tout en ayant un contrôle JS moderne sur le formulaire. La seule mise en garde est que le bouton de soumission 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...
}

Je pense que la meilleure approche

utilisera plugin jQuery Validation qui utilise les meilleures pratiques pour la validation des formulaires et il a également une bonne prise en charge du navigateur. Vous n'avez donc pas à vous soucier des problèmes de compatibilité du navigateur.

Et nous pouvons utiliser la fonction validation () de validation jQuery 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>

Selon la question, la validité html5 devrait être validée en utilisant jQuery au début et dans la plupart des réponses, cela ne se produit pas 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 renvoie un tableau d'objets, tout 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);}
        });
    }
}