Ein Formular mit Jquery validieren

Question

Hat jemand eine Idee, warum dieser Code nicht funktioniert? Es bringt mich nur auf eine "nicht gefunden" -Seite beim Einreichen. Ich kopierte das meiste davon von Learning Jquery.com, aber es funktioniert immer noch nicht. Meine IDs und Namen stimmen überein, also kann das nicht sein. Die Seite hat gesagt, dass ich vielleicht die JQuery-Bibliothek herunterladen müsste, aber sicher würde nur die Verknüpfung mit der Bibliothek funktionieren. Der erste Schnipsel ist die JQuery, die zweite meine CSS und der dritte mein HTML (dort können Sie das src sehe ich auf die JQuery-Bibliothek verwendet zu verknüpfen.

$("#contactForm").validate({ 
 
    //specify the validation rules 
 
    rules: { 
 
    firstname: "required", 
 
    lastname: "required", 
 
    email: { 
 
     required: true, 
 
     email: true //email is required AND must be in the form of a valid email address 
 
    }, 
 
    password: { 
 
     required: true, 
 
     minlength: 6 
 
    } 
 
    }, 
 

 
    //specify validation error messages 
 
    messages: { 
 
    firstname: "First Name field cannot be blank!", 
 
    lastname: "Last Name field cannot be blank!", 
 
    password: { 
 
     required: "Password field cannot be blank!", 
 
     minlength: "Your password must be at least 6 characters long" 
 
    }, 
 
    email: "Please enter a valid email address" 
 
    }, 
 

 
    submitHandler: function(form) { 
 
    form.submit(); 
 
    } 
 

 
});

.form-container { 
 
    width: 500px; 
 
    margin: 25px auto; 
 
} 
 

 
form { 
 
    padding: 20px; 
 
    background: #2c3e50; 
 
    color: #fff; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
form label, 
 
form input, 
 
form button { 
 
    border: 0; 
 
    margin-bottom: 3px; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
form input { 
 
    height: 25px; 
 
    line-height: 25px; 
 
    background: #fff; 
 
    color: #000; 
 
    padding: 0 6px; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
form button { 
 
    height: 30px; 
 
    line-height: 30px; 
 
    background: #e67e22; 
 
    color: #fff; 
 
    margin-top: 10px; 
 
    cursor: pointer; 
 
} 
 

 
form .error { 
 
    color: #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 
 

 
<div class="form-container"> 
 
    <h2>Registration</h2> 
 
    <form action="#" name="contactForm" id="contactForm"> 
 
    <label for="firstname">First Name</label> 
 
    <input type="text" name="firstname" id="firstname" placeholder="John" /> 
 

 
    <label for="lastname">Last Name</label> 
 
    <input type="text" name="lastname" id="lastname" placeholder="Doe" /> 
 

 
    <label for="email">Email</label> 
 
    <input type="email" name="email" id="email" placeholder="john@doe.com" /> 
 

 
    <label for="password">Password</label> 
 
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;" /> 
 

 
    <button type="submit">Submit</button> 
 
    </form>

Answer 1

Sie müssen umfassen JQuery Bibliothek Referenz.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Answer 2

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

Versuchen Sie, diese jQuery-Bibliothek zu importieren.