web-dev-qa-db-fra.com

validation du formulaire jQuery avant l'envoi d'Ajax

Bit JavaScript:

$(document).ready(function()
    {
            $('#form').submit(function(e)
            {     

                e.preventDefault();
                var $form = $(this);

                // check if the input is valid
                if(! $form.valid()) return false;
                    $.ajax(
                    {
                    type:'POST',
                    url:'add.php',
                    data:$('#form').serialize(),
                    success:function(response)
                    {
                        $("#answers").html(response);
                    }
                });     

            })
    });

Bit HTML:

    <input type="text" name="answer[1]" class="required" />
    <input type="text" name="answer[2]" class="required" />

C'est donc le code que j'essaie d'utiliser. L'idée est de faire valider toutes mes entrées avant d'envoyer mon formulaire avec Ajax. J'ai essayé de nombreuses versions de cela maintenant, mais chaque fois, je finis par soumettre, même si le formulaire n'est pas entièrement rempli. Toutes mes entrées sont de la classe "obligatoire". Quelqu'un peut-il voir ce que je fais mal?

De plus, je dépend des exigences de la classe car mes noms d’entrée sont générés avec php. Je ne peux donc jamais être sûr du nom [id] ou des types d’entrée que je reçois.

Je montre/cache les questions en les parcourant dans des "pages".

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>

JS:

function toggleVisibility(newSection) 
        {
            $(".section").not("#" + newSection).hide();
            $("#" + newSection).show();
        }
jqueryajaxjquery-validatevalidation
36
Tom

Vous pouvez utiliser l'option submitHandler . En gros, placez l’appel $.ajax dans ce gestionnaire, c’est-à-dire inversez-le avec la logique de configuration de la validation.

$('#form').validate({

    ... your validation rules come here,

    submitHandler: function(form) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize(),
            success: function(response) {
                $('#answers').html(response);
            }            
        });
    }
});

Le plugin jQuery.validate appellera le gestionnaire d'envoi si la validation est réussie.

81
Darin Dimitrov

d'abord, vous n'avez pas besoin d'ajouter explicitement la classRules car required est automatiquement détecté par le plugin jquery.validate . vous pouvez donc utiliser ce code:

  1. lors de l'envoi du formulaire, vous empêchez le comportement par défaut 
  2. si le formulaire est invalide, arrêtez l'exécution.

  3. sinon, si valide, envoie la requête ajax.

    $('#form').submit(    function(e){     

            e.preventDefault();
            var $form = $(this);

          // check if the input is valid
            if(! $form.valid()) return false;

           $.ajax({
                type: 'POST',
                url: 'add.php',
                data: $('#form').serialize(),
                success: function(response) {
                    $("#answers").html(response);
                }

            });
        });
12
amd

Vous pouvez essayer de faire:

if($("#form").validate()) {
 return true;
} else {
 return false;
}
6
Arkadiusz 'flies' Rzadkowolski

Cet exemple spécifique va juste vérifier les entrées mais vous pouvez le modifier cependant, ajoutez quelque chose comme ça à votre fonction .ajax:

beforeSend: function() {                    
    $empty = $('form#yourForm').find("input").filter(function() {
        return this.value === "";
    });
    if($empty.length) {
        alert('You must fill out all fields in order to submit a change');
        return false;
    }else{
        return true;
    };
},
5
Erik Grosskurth

Je pense que submitHandler avec validation JQuery est une bonne solution. S'il vous plaît avoir une idée de ce code. Inspiré de @Darin Dimitrov

$('.calculate').validate({

                submitHandler: function(form) {
                    $.ajax({
                        url: 'response.php',
                        type: 'POST',
                        data: $(form).serialize(),
                        success: function(response) {
                            $('#'+form.id+' .ht-response-data').html(response);
                        }            
                    });
                }
            });
3
shahzad jam
> Required JS for jquery form validation
> ## jquery-1.7.1.min.js ##
> ## jquery.validate.min.js ##
> ## jquery.form.js ##

$("form#data").validate({
    rules: {
        first: {
                required: true,
            },
        middle: {
            required: true,
        },          
        image: {
            required: true,
        },
    },
    messages: {
        first: {
                required: "Please enter first",
            },
        middle: {
            required: "Please enter middle",
        },          
        image: {
            required: "Please Select logo",
        },
    },
    submitHandler: function(form) {
        var formData = new FormData($("#image")[0]);
        $(form).ajaxSubmit({
            url:"action.php",
            type:"post",
            success: function(data,status){
              alert(data);
            }
        });
    }
});
3
user3655384

Je pense que je valide d'abord le formulaire et si la validation réussit, je ferais un post ajax N'oubliez pas d'ajouter "return false" à la fin du script.

3
Mantas Vaitkūnas
function validateForm()
{
    var a=document.forms["Form"]["firstname"].value;
    var b=document.forms["Form"]["midname"].value;
    var c=document.forms["Form"]["lastname"].value;
    var d=document.forms["Form"]["tribe"].value;
    if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
    {
        alert("Please Fill All Required Field");
        return false;
    }
    else{

        $.ajax({
        type: 'post',
        url: 'add.php',
        data: $('form').serialize(),
        success: function () {
          alert('Patient added');
          document.getElementById("form").reset();
        }
      });

    }
}

  $(function () {

    $('form').on('submit', function (e) {
      e.preventDefault();

      validateForm();


    });
  });
1
luis

La fonction JavaScript checkValidity de formulaire native est plus que suffisante pour déclencher la validation HTML5

$(document).ready(function() {
    $('#urlSubmit').click(function() {
        if($('#urlForm')[0].checkValidity()) {
            alert("form submitting");
        }
    });
});
0
jforjs