Verhindern modal geschlossen, wenn Fehler beim übermitteln des Formulars (jQuery)

Grundsätzlich habe ich damit ein bootstrap modal mit einem Formular:

html:

<div id="modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <!-- some heading here -->
            </div>
            <div class="modal-body">
                <form class="form-partner">
                    <!-- some form here -->
                </form>
            </div>
            <div class="modal-footer" style="text-align:center;">
                <div id="message"></div>
                <button class="btn btn-lg" type="submit" id="submit">BUTTON</button>
            </div>
        </div>
    </div>
</div>

Und ein jQuery-Skript, das es sendet, um send.php, wo die Daten geprüft und an den server gesendet werden.

js

$(function() {
    $("#submit").click(function(){
        $.ajax({
            type: "POST",
            url: "send.php",
            data: $('form').serialize(),
            success: function(msg){
                $("#message").html(msg)
                //$("#modal").modal('hide'); 
            },
            error: function(){
                alert("failure");
            }
        });
    });
});

Schreibe ich eine Fehlermeldung an den div#message, aber ich brauche es zum schließen des modal -, wenn die Einreichung erfolgreich war.

Gibt es eine Möglichkeit, das zu tun, wie kann ich das überprüfen die Gültigkeit der Daten (wie E-Mail, wenn tatsächlich eine E-Mail) in jQuery $.ajax selbst?

So Ihr modal nicht ausgeblendet werden, wenn Sie kommentieren Sie, dass eine Zeile? Jede Validierung der Daten zurückgegeben, die von php geprüft werden können, in Ihren Erfolgs-callback
Es schließt auch, wenn, sagen wir, alle Felder sind leer, oder filter_var($email, FILTER_VALIDATE_EMAIL) gibt false zurück. Soweit ich bekommen, Erfolg: $.ajax() entspricht das erfolgreiche senden von Daten (selbst wenn die Daten ist ungültig).

InformationsquelleAutor Hayk Hakobyan | 2015-09-01

Können Sie die Prüfungen vor der $.ajax anrufen und schreiben-Fehlermeldung, die der modal-wenn überhaupt. Ausführen von ajax nur wenn die Validierung erfolgreich ist.

$(function() {
$("#submit").click(function(e){
    e.preventDefault();
    var email= ....; //get user entered email;
    //validate email (pseudo code)
    if(email is invalid) {
    //display message to div#message
    }
    else {
    //make ajax call
    $.ajax({
        type: "POST",
        url: "send.php",
        data: $('form').serialize(),
        success: function(msg){
            $("#message").html(msg)
            //$("#modal").modal('hide'); 
        },
        error: function(){
            alert("failure");
        }
    });
    }
});
});

Wenn du da die überprüfung auf der server-Seite, dann anstatt Meldung können Sie die return-codes, wie z.B. : 1 für Erfolg, 2 für schlechte E-Mail, etc.
Dann können Sie etwas tun, wie dies in der ajax-Funktion:-

$.ajax({
    type: "POST",
    url: "send.php",
    data: $('form').serialize(),
    success: function(msg){
        if(msg == 1) $("#modal").modal('hide');
        else if(msg == 2) $("#message").html("Bad Email");
        //etc...
    },
    error: function(){
        alert("Failed to submit data");
    }
});

Wenn Sie können posten Sie Ihre send.php ich könnte in der Lage sein, um Ihnen eine komplette Lösung code.

Gut, das funktioniert natürlich. Ich bin der übermittlung der Daten an den server, dann echo-ing unterschiedlichen Werte und machen Sachen nach, die, wie Fehler, etc. Ich dachte nur, es könnte ein kanonischen Weise zu lösen, dass.
Ich möchte den gleichen code für HTML-auch dies ist in php, Anregungen bitte...

InformationsquelleAutor Sean Mishra

1

können Sie dies tun, indem Sie hide.bs.modal Veranstaltung. dieses Ereignis gefeuert wird automatisch, wenn Sie modal zu verstecken

JS
```
$('.modal').on('hide.bs.modal', function(e) {        
   //Submit data to server and in success callback write if to validate whether form data is valid or not . 
    if(invalidForm) {           
            e.preventDefault();
    }
});
```
und eine weitere einfache Sache ist, nicht bieten keine schließen-buttons auf den modalen und folgenden code verwenden. Im folgenden code-Benutzer nicht in der Lage, in der Nähe der modal. Nutzer haben nur eine Möglichkeit, um Daten einzugeben.

JS
```
 $('#myModal').modal({backdrop: 'static', keyboard: false})  
```
- oder HTML -
```
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>
```
backdrop: static verhindert modal schließen, das Auftritt, durch klicken auf dem Bildschirm außerhalb modal.
keyboard:false verhindert modal-close über die Tastatur. (in der Regel modal geschlossen werden kann, mit ESC Schlüssel)
- backdrop: static deaktiviert ausblenden klicken, die ist nicht eine gute option.
- ja, der deaktiviert ausblenden, auf Klick, aber die optionalen, wenn Sie möchten, dass Benutzer zu zwingen, das Formular zu senden, können Sie mit diesem
- Ich schon die Antwort oben, nur das senden benutzerdefinierter msg aus .php-Datei und handeln entsprechend. Aber, danke für die Antwort!
- Aber was ist, wenn ich wollen zu geben die Freiheit der Verbraucher zum schließen des modal?
- Das ist ein Standard-feature von bootstrap.
- Danke, können wir umgehen dieses feature irgendwie?
- was ist Ihre Anforderung ?
- Eigentlich habe ich ein Formular innerhalb Modal, und die form haben eine zipcode-Feld, wenn dieses Feld ist ungültig zip-format, die in der Nähe buttton und schließen-Symbol nicht funktioniert( wie Sie informiert, Ihre Standard-Funktion). aber wenn alles gültig ist, ist der Benutzer in der Lage, in der Nähe von modalen und wieder öffnen Sie es erneut, mit derselben info. so trat er ein. Ich möchte, dass Benutzer immer noch die gleiche, auch wenn der zip-code ist ungültig.
- verwenden Sie das erste code-snippet in meiner Antwort.
InformationsquelleAutor J Santosh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.