Comment faire pour forcer un html5 de validation de formulaire sans le soumettre via jQuery

J'ai trouvé que cette solution fonctionne pour moi.
Suffit d'appeler une fonction javascript comme ceci:

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()

à partir de: validation de formulaire html5

Vous parler de deux choses différentes "la validation HTML5" et de validation de formulaire HTML à l'aide de javascript/jquery.

HTML5 "a" options intégrées pour la validation d'un formulaire. Comme l'utilisation de "nécessaire" attribut sur un domaine, qui pourrait (basé sur le navigateur de mise en œuvre) échec de la soumission d'un formulaire sans l'aide de 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 atteindre cet objectif. Dans votre formulaire d'ajouter:

onsubmit="return buttonSubmit(this)

ou en JavaScript:

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

Dans votre buttonSubmit fonction (ou whatver vous l'appelez), vous pouvez soumettre le formulaire en utilisant AJAX. buttonSubmit ne me demande si votre formulaire est validé en HTML5.

Dans le cas où cette aide à quelqu'un, voici mon buttonSubmit fonction:

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 de clic.

J'ai eu une situation assez complexe, où j'ai besoin de plusieurs boutons de soumission pour traiter des choses différentes. Par exemple, Enregistrer et Supprimer.

La base, il était aussi discret, donc je ne pouvais pas juste faire un bouton normal. Mais il voulait aussi utiliser la validation html5.

Ainsi l'événement submit a été remplacée dans les cas où l'utilisateur a appuyé sur la touche entrée pour déclencher l'prévue par défaut de soumission; dans cet exemple enregistrer.

Ici, ce sont les efforts de la transformation de la forme à continuer à travailler avec/sans javascript et html5 de validation, avec à la fois présenter et cliquez sur événements.

jsFiddle Démo - la validation HTML5 avec soumettre et cliquez sur les substitutions

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'aide de Javascript, c'est que le navigateur par défaut de onclick doit se propager jusqu'à la soumission de l'événement DOIT se produire afin d'afficher les messages d'erreur sans l'appui de chaque navigateur dans votre code.
Sinon, si l'événement click est remplacée par de l'événement.preventDefault() ou return false il ne sera jamais à se propager vers le navigateur de l'événement submit.

La chose à souligner est que, dans certains navigateurs ne se déclenche pas à la soumettre le formulaire lorsque l'utilisateur appuie sur entrée, à la place il va déclencher le premier bouton de soumission du formulaire. Il y a donc une console.log ("formulaire de soumission") pour montrer qu'il ne déclenche pas.

Je sais que cela a déjà été répondu, mais j'ai une autre solution possible.

Si à l'aide de jquery, vous pouvez le faire.

D'abord créer un couple d'extensions jquery de sorte que vous pouvez resuse lorsque c'est nécessaire.

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

Prochaine 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>

Travaillé cette forme me afficher le natif HTML 5 messages d'erreur à la validation d'un 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

Espoir aide à quelqu'un.

De cette façon fonctionne bien pour moi:

1. Ajouter onSubmit attribut dans votre form, n'oubliez pas d'inclure return de la valeur.

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

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

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

pas une meilleure réponse, mais fonctionne pour moi.

Selon la question html5 validité doit être en mesure de valider à l'aide de jQuery au début et à la plupart de la réponse ce n'est pas le cas et la raison pour cela est la suivante:

lors de la validation à l'aide de html5 forme par défaut de la fonction

checkValidity();//returns true/false

nous avons besoin de comprendre que jQuery retourne un tableau d'objets, alors que la sélection comme ceci

$("#myForm")

par conséquent, vous devez spécifier le premier index de faire checkValidity() de la fonction de travail

$('#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);}
        });
    }
}