it-swarm.com.de

Überprüfen Sie den Eingabetext im Bootstrap-Modus

Ich möchte ein Formular in einem Bootstrap-Modal überprüfen, ohne ein Framework zu verwenden. Es ist eigentlich ein einfacher Modal mit nur einem Eingabetext und zwei Schaltflächen "Schließen" und "Senden". .__ Der Benutzer sollte seinen Namen in das Eingabefeld eingeben und auf Senden klicken. Das Formular wird mit der Methodenpost verschickt.

Was ich tun möchte, ist, dass, wenn der Benutzer nichts in das Eingabefeld von eingibt und auf die Schaltfläche "Senden" klickt, das Eingabefeld einen roten Rahmen anstelle des standardmäßigen blauen Rahmens haben soll. Hier ist der Code für mein Modal:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!--form-->

            <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">My modal</h4>
                </div>
                <div class="modal-body">
                    <p>
                        Please enter your name:
                    </p>
                    <br/>

                    <div class="form-group">

                        <div class="col-lg-12">
                            <label class="control-label" for="firstname">Name</label>
                            <input type="text" class="form-control required" id="firstname" name="firstname">
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="myFormSubmit" class="btn btn-primary">Send</button>
                </div>
            </form>
        </div>
    </div>
</div>

Ich habe versucht, Javascript zu verwenden, um die Klasse des Eingabetextes in has-error zu ändern, aber der rote Umriss wird nicht erzeugt. Wenn ich auf "Senden" klicke, wird der leere Wert durch die Post-Methode anstelle von .__ gesendet. Hier ist mein Javascript-Code:

    <script type="text/javascript">
        $('#myForm').validate({
            rules: {
                name: {
                    minlength: 1,
                    required: true
                },
            },
            highlight: function (element) {
                $('#firstname').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {
                $('#firstname').removeClass('has-error').addClass('has-success');
            }
        });
    </script>

Ich fühle mich, als würde ich hier eine Menge Dinge vermischen. Ich bin noch neu in Bootstrap und Javascript. Wie kann ich die gewünschte rote Kontur erhalten? Danke.

Edit: Validierungsfunktion:

function validate() {
    var x = document.forms["myForm"]["firstname"].value;
    if (x == null || x == "") {
        return false;
    }
}
5
mkab

Sie müssen die CSS-Klassen des input parent element div.form-group, nicht die input selbst ändern :

Die HTML nach dem Klicken des Submit-Buttons sollte folgendermaßen aussehen:

<div class="form-group has-error">
   <div class="col-lg-12">
      <label class="control-label" for="firstname">Name</label>
      <input type="text" class="form-control required" id="firstname" name="firstname">
    </div>
</div>

Um dies zu erreichen, ändern Sie Ihren JavaScript-Code wie folgt:

<script type="text/javascript">
  $('#myForm').on('submit', function(e) {
    var firstName = $('#firstname');

    // Check if there is an entered value
    if(!firstName.val()) {
      // Add errors highlight
      firstName.closest('.form-group').removeClass('has-success').addClass('has-error');

      // Stop submission of the form
      e.preventDefault();
    } else {
      // Remove the errors highlight
      firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
    }
  });
</script>
11
Plamen Nikolov

es ist sehr leicht 

wenden Sie einfach die Klasse .has-error an die Funktion div by javascript an

<div class="form-group has-error">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

        </div>
    </div>
</div>
1
Minesh

div im Stiefelriemen ...

<div class="form-group">
    <div class="row">

        <label class="col-xs-2 col-sm-2 control-label">city:</label>

        <div class="col-xs-3 col-sm-3 formGroups"
            id="city_form1">
            <form:input name="city" class="form-control"
                placeholder="City" data-toggle="tooltip"
                data-placement="bottom" title="City" maxlength="15" />

            <small class="help-block col-sm-offset-0 col-sm-9"
                style="display: none;">city must require</small>
        </div>
    </div>
</div>

wie Sie sehen, gibt es .help-Block wird angezeigt: Keiner schreibt jetzt Javascript-Funktion und prüft die Gültigkeitsprüfung 

genieß mit Kofferraumgurt :)

1
Minesh

Verwenden Sie einfach das erforderliche Feld innerhalb des Eingabefelds

<input type="text" class="form-control required" id="firstname" name="firstname" required/>
0