it-swarm.com.de

jQuery-Formularüberprüfung vor dem Senden von Ajax

JavaScript-Bit:

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

            })
    });

HTML-Bit:

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

Das ist also der Code, den ich verwenden möchte. Die Idee ist, alle meine Eingaben zu überprüfen, bevor ich mein Formular mit Ajax schicke. Ich habe bereits zahlreiche Versionen davon ausprobiert, aber jedes Mal ende ich mit dem Senden, auch wenn das Formular nicht vollständig ausgefüllt ist. Alle meine Eingaben sind von der "erforderlichen" Klasse. Kann jemand sehen, was ich falsch mache?

Ich bin auch auf klassenbasierte Anforderungen angewiesen, da meine Eingabenamen mit PHP generiert werden. Daher kann ich nie sicher sein, welchen Namen [Id] oder welche Eingabetypen ich bekomme.

Ich zeige/verstecke Fragen, wenn ich sie auf "Seiten" durchsehe.

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

JS:

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

Sie können die Option submitHandler verwenden. Setzen Sie den Aufruf $.ajax grundsätzlich in diesen Handler, d. H. Invertieren Sie ihn mit der Validierungs-Setup-Logik.

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

Das jQuery.validate-Plugin ruft den Submit-Handler auf, wenn die Validierung bestanden wurde.

81
Darin Dimitrov

zuerst müssen Sie die Variable classRules nicht explizit hinzufügen, da required automatisch vom Plugin jquery.validate ..__ erkannt wird. Sie können also diesen Code verwenden:

  1. beim Senden von Formularen verhindern Sie das Standardverhalten 
  2. wenn das Formular ungültig ist, beenden Sie die Ausführung.
  3. sonst, falls gültig, senden Sie die Ajax-Anfrage.

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

Sie können versuchen, Folgendes zu tun:

if($("#form").validate()) {
 return true;
} else {
 return false;
}

In diesem speziellen Beispiel wird nur nach Eingaben gesucht. Sie können es jedoch anpassen, indem Sie der .ajax-Funktion etwas hinzufügen:

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

Ich denke, submitHandler mit Jquery-Validierung ist eine gute Lösung. Bitte machen Sie sich ein Bild von diesem Code. Inspiriert von @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

Ich denke, dass ich zuerst das Formular validiere und wenn die Validierung erfolgreich ist, dann würde ich Ajax Post machen. Vergessen Sie nicht, "return false" am Ende des Skripts hinzuzufügen.

3
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

Die native checkValidity-Funktion von JavaScript ist mehr als ausreichend, um die HTML5-Validierung auszulösen

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