Bootstrap 3 Formular modal ist, mit PHP, Validierung

Ich versuche, verwenden Sie die Bootstrap 3 modale Funktion. Habe ich eine einfache form des modalen.
Bootstrap 3 Formular modal ist, mit PHP, Validierung

Mein Ziel ist, dass die form, verarbeitet mit PHP, wich ich es geschafft mit dem folgenden Skript:

$(function() {
    $("button#submit").click(function() {
        $.ajax({
            type: "POST",
            url: "process.php",
            data: $('form.company').serialize(),
            success: function(response) {
                var result = jQuery.parseJSON(response);
                /* TO DO */
                if (result.success === 0) {
                    $("#error").html(response);
                    $("#error").show();
                } else {
                    $("#success").html(response);
                    $("#success").show();
                    $("#myModal").modal('hide');
                }
            },
            error: function() {
                alert("failure");
            }
        });
    });
});

Ist dies funktioniert Recht gut, ich bin in der Lage, fügen Sie die neu gegründete Firma auf die Datenbank und so weiter. Die Eingabe wird geprüft, server-Seite und wenn es ist nicht in Ordnung, erhält der Benutzer eine Fehlermeldung (derzeit nicht vollständig umgesetzt, aber die Idee ist, zu arbeiten). Das problem ist, ich möchte, um zu zeigen dem Benutzer, dass einige Felder, die nicht in Ordnung sind, statt nur eine Globale Fehlermeldung (#error).

Fand ich heraus, dass jQuery form Validierung option, aber ich kann nicht erhalten, es funktioniert aus irgendeinem Grund. Und last but not least, ich möchte eine Mehrsprachige Anwendung. So, ein weiteres problem ist, dass ich sollte in der Lage sein zu ändern die Fehlermeldungen produziert von der jQuery-validation-Methode. (Ich möchte gehen diese Nachrichten von meinem process.php Skript).

Hier ist der code der form:

<form class="form-horizontal company" role="form" id="comp">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">Name</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Company">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="street" class="col-sm-2 control-label">Street</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="street" name="street" placeholder="Street">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="number" class="col-sm-2 control-label">Number</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="number" name="number" placeholder="Number">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="zipcode"  class="col-sm-2 control-label">ZIP Code</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="city" class="col-sm-2 control-label">City</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="city" name="city" placeholder="City">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="country" class="col-sm-2 control-label">Country</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="country" name="country" placeholder="Country">
                        </div>
                    </div>
                </form>

Dies ist das Skript, das ich habe versucht, für die Validierung: http://jsfiddle.net/v5HQr/1/

Jemand könnte mich beraten?

Dont' hören click Veranstaltungen auf Schaltflächen, sondern auf die submit Veranstaltung der <form> selbst.

InformationsquelleAutor Write Down | 2014-02-14

  1. 2

    Zu bekommen Validierung, um richtig zu arbeiten hatte ich die Zuordnung der bootstrap-Klassen mit jQuery. Versuchen Sie, die folgenden Standardeinstellungen für jQuery, schlage vor, Sie platzieren es an der Spitze der JavaScript-Datei.

    if (jQuery.validator) {
    jQuery.validator.setDefaults({
        debug: true,
        errorClass: 'has-error',
        validClass: 'has-success',
        ignore: "",
        highlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorPlacement: function (error, element) {
            $(element).closest('.form-group').find('.help-block').text(error.text());
        },
        submitHandler: function (form) {
            if ($(form).valid()) {
                form.submit();                    
            }
            else {
              return false;
            }
        }
    }
});

    }

    HTML

    Werden Sie auch brauchen, um die erforderliche Markierung auf Ihre Eingaben, zum Beispiel:

    <form>
    <input required>
</form>

    Können Sie auch das hinzufügen von Daten zu Attributen wie gut, diese Website hat eine Liste, um Ihnen den Einstieg:

    http://denverdeveloper.wordpress.com/2012/09/26/some-things-ive-learned-about-jquery-unobtrusive-validation/

    data-val=”true” enable unobtrusive validation on this element (should be on every input element you want to validate)
data-val-required=”ErrMsg”  makes the input required, and shows the ErrMsg
data-val-length=”ErrMsg” 
data-val-length-min=”5” 
data-val-length-max=”15”    sets required string length and associated error message.
data-val-number=”ErrMsg”    makes a field required to be a number.
data-val-date=”ErrMsg”  requires a field to be a date (I do not recommend this, as it accepts too much – I prefer to use regex).
data-val-equalto=”ErrMsg” 
data-val-equalto-other=”Fld”    requires one field to match the other (such as password confirm.  Fld is a jQuery selector
data-val-regex=”ErrMsg” 
data-val-regex-pattern=”^regex$”    Requires the field to match the regex pattern.
data-val-email=”ErrMsg” requires a field to be a email (I do not recommend this, as it accepts too much – I prefer to use regex).
data-val-url=”ErrMsg”   requires a field to be a url (I do not recommend this, as it accepts too much – I prefer to use regex).

    Als ich bemerkte mehrere Dinge, url , Telefon, E-Mail Datum, das Sie finden könnte, die besser funktionieren mit regex. Hier sind einige der regex den ich verwendet habe:

    number  ^(\d{1,3},?(\d{3},?)*\d{3}(\.\d{1,3})?|\d{1,3}(\.\d{2})?)$
date    ^[0,1]?\d{1}\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([2-9]{1}\d{3}))$
url     ^(http|https)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&amp;%\$#\=~])*$
phone   ^([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)$

    InformationsquelleAutor oceanexplorer

Schreibe einen Kommentar