it-swarm.com.de

Formularüberprüfung mit Bootstrap (jQuery)

Kann mir bitte jemand mit diesem Code helfen? Ich verwende Bootstrap für das Formular und versuche, es mit jQuery zu überprüfen. Leider sagt mir die Formularüberprüfung nicht, was ich falsch mache. Ich habe das Skript von http://jqueryvalidation.org/documentation/ erhalten und ein Tutorial zur clientseitigen Validierung durchlaufen.

<!DOCTYPE html>

<html>
<head>
        <meta charset="utf=8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery.validate.min.js"></script> //Script found online

        <script>
            $(document).ready(function(){

             $('#contact-form').validate(
             {
              rules: {
                name: {
                  minlength: 2,
                  required: true
                },
                email: {
                  required: true,
                  email: true
                },
                message: {
                  minlength: 2,
                  required: true
                }
              },
              highlight: function(element) {
                $(element).closest('.control-group').removeClass('success').addClass('error');
              },
              success: function(element) {
                element
                .text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
              }
             });
            }); // end document.ready
        </script>

    </head>

    <div class="hero-unit">  
        <h1>Contact Form</h1> </br>

    <form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">  
        <div class="control-group">  
            <label class="control-label" for="name">Name</label>  
            <div class="controls">  
                <input type="text" name="name" id="name" placeholder="Your name">  
            </div>  
        </div>  
        <div class="control-group">  
            <label class="control-label" for="email">Email Address</label>  
            <div class="controls">  
                <input type="text" name="email" id="email" placeholder="Your email address">  
            </div>  
        </div>
        <div class="control-group">  
            <label class="control-label" for="subject">Subject</label>
            <div class="controls"> 
                    <select id="subject" name="subject">
                        <option value="na" selected="">Choose One:</option>
                        <option value="service">Feedback</option>
                        <option value="suggestions">Suggestion</option>
                        <option value="support">Question</option>
                        <option value="other">Other</option>
                    </select>
            </div>
        </div>
        <div class="control-group">  
            <label class="control-label" for="message">Message</label>  
            <div class="controls">  
                <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>  
            </div>  
        </div>  
        <div class="form-actions">  
            <input type="hidden" name="save" value="contact">  
            <button type="submit" class="btn btn-success">Submit Message</button> 
            <button type="reset" class="btn">Cancel</button>  
        </div>  
    </form>  

</div>  

        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="js/bootstrap.js"></script>


    </body>

25
user2693351

Ich hatte Ihren Code auf jsFiddle eingerichtet, um zu versuchen, das Problem zu diagnostizieren.

http://jsfiddle.net/5WMff/

Ich scheine jedoch nicht auf Ihr Problem zu stoßen ... Könnten Sie einen Blick darauf werfen und uns Bescheid geben?

HTML

<div class="hero-unit">
 <h1>Contact Form</h1> 
</br>
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
    <div class="control-group">
        <label class="control-label" for="name">Name</label>
        <div class="controls">
            <input type="text" name="name" id="name" placeholder="Your name">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="email">Email Address</label>
        <div class="controls">
            <input type="text" name="email" id="email" placeholder="Your email address">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="subject">Subject</label>
        <div class="controls">
            <select id="subject" name="subject">
                <option value="na" selected="">Choose One:</option>
                <option value="service">Feedback</option>
                <option value="suggestions">Suggestion</option>
                <option value="support">Question</option>
                <option value="other">Other</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="message">Message</label>
        <div class="controls">
            <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
        </div>
    </div>
    <div class="form-actions">
        <input type="hidden" name="save" value="contact">
        <button type="submit" class="btn btn-success">Submit Message</button>
        <button type="reset" class="btn">Cancel</button>
    </div>
</form>

Javascript

$(document).ready(function () {

$('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        message: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
    }
});
});
37
Jayawi Perera

Sie können eine weitere Validierung für dieses Tutorial erhalten: http://twitterbootstrap.org/bootstrap-form-validation

Sie verwenden die JQuery-Validierung.

jquery.validate.js

jquery.validate.min.js

jquery-1.7.1.min.js

enter image description here

Und Sie erhalten dort den Quellcode.

 <form id="registration-form" class="form-horizontal">
 <h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
 <div class="form-control-group">
        <label class="control-label" for="name">Your Name</label>
 <div class="controls">
          <input type="text" class="input-xlarge" name="name" id="name"></div>
 </div>
 <div class="form-control-group">
        <label class="control-label" for="name">User Name</label>
 <div class="controls">
          <input type="text" class="input-xlarge" name="username" id="username"></div>
 </div>
 <div class="form-control-group">
        <label class="control-label" for="name">Password</label>
 <div class="controls">
          <input type="password" class="input-xlarge" name="password" id="password">

</div>
</div>
<div class="form-control-group">
            <label class="control-label" for="name"> Retype Password</label>
<div class="controls">
              <input type="password" class="input-xlarge" name="confirm_password" id="confirm_password"></div>
</div>
<div class="form-control-group">
            <label class="control-label" for="email">Email Address</label>
<div class="controls">
              <input type="text" class="input-xlarge" name="email" id="email"></div>
</div>
<div class="form-control-group">
            <label class="control-label" for="message">Your Address</label>
<div class="controls">
              <textarea class="input-xlarge" name="address" id="address" rows="3"></textarea></div>
</div>
<div class="form-control-group">
            <label class="control-label" for="message"> Please agree to our policy</label>
<div class="controls">
             <input id="agree" class="checkbox" type="checkbox" name="agree"></div>
</div>
<div class="form-actions">
            <button type="submit" class="btn btn-success btn-large">Register</button>
            <button type="reset" class="btn">Cancel</button></div>
</form>

Und die JQuery:

<script src="assets/js/jquery-1.7.1.min.js"></script>

<script src="assets/js/jquery.validate.js"></script>

<script src="script.js"></script>
<script>
            addEventListener('load', prettyPrint, false);
            $(document).ready(function(){
            $('pre').addClass('prettyprint linenums');
                  });

Hier ist das Live-Beispiel für den Code: http://twitterbootstrap.org/live/bootstrap-form-validation/

Überprüfen Sie das vollständige Tutorial: http://twitterbootstrap.org/bootstrap-form-validation/

glückliche Kodierung.

5
Mujahidul Jahid

Überprüfen Sie diese Bibliothek , es ist mit booth bootstrap 3 und bootstrap 4 fertigbar

jQuery

<form>
    <div class="form-group">
        <input class="form-control" data-validator="required|min:4|max:10">
    </div>
</form>

Javascript

$(document).on('blur', '[data-validator]', function () {
    new Validator($(this));
});
1
bnabriss

Versuchen Sie nach dem Entfernen von Divs aus dem Formular, oder versuchen Sie, die Onclick-Methode beim Senden-Button zu verwenden.

0
Zeshan Khan

enter image description here

Hier ist ein sehr einfaches und leichtes Plugin zur Validierung mit Boostrap. Sie können es verwenden, wenn Sie möchten: https://github.com/wpic/bootstrap.validator.js

0
user1079877