2016-07-29 12 views
0

Ich versuche, mein Formular mit parsley.js zu validieren, ich arbeite als das offizielle gute Buch sagt, um dies zu tun, aber aus bestimmten Gründen (die ich offensichtlich nicht jetzt weiß), funktioniert es nicht .Petersilie JS nicht validieren

Hier ist der Code

<div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <h2>Parsley JS Form Validation</h2> 
       <form data-validate="parsley"> 
        <label>Name </label> 
        <input type="text" name="fname" class="form-control" required /> 
        <label>Email </label> 
        <input type="text" name="email" class="form-control" data-type="email" data-trigger="change" required /> 
        <label>Password </label> 
        <input type="text" name="lname" class="form-control" data-type="password" required /> 
        <br /> 
        <input type="submit" class="btn btn-success" value="Submit"> 
       </form> 
      </div> 
     </div> 
    </div> 

Hier ist die Plunkr Link.

+0

[Official parsley.js Dokumentation] sein (http : //parsleyjs.org/doc/index.html), [examples] (http://parsleyjs.org/doc/examples.html) – Andreas

Antwort

2

Ich weiß nicht, wie man es speichert, also poste ich es hier: Ich änderte die Jquery-Version, die Petersilie-Version (Sie verwendeten eine alte), und fügte auch die CSS von Petersilie Website. Ihre Tag-Attribute waren falsch. dies funktioniert:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Parsley JS</title> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
     <link href="https://parsleyjs.org/src/parsley.css" rel="stylesheet" /> 
     <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.4/parsley.min.js"></script> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <h2>Parsley JS Form Validation</h2> 
        <form data-parsley-validate="parsley"> 
         <label>Name </label> 
         <input type="text" name="fname" class="form-control" required="true" /> 
         <label>Email </label> 
         <input name="email" class="form-control" type="email" data-parsley-trigger="change" required="true" /> 
         <label>Password </label> 
         <input name="lname" class="form-control" type="password" required="true" /> 
         <br /> 
         <input type="submit" class="btn btn-success" value="Submit"> 
        </form> 
       </div> 
      </div> 
     </div>   
    </body> 
</html> 
+1

Jquery war kein Problem, anstelle von 'data-validate =" petersilie "' es sollte wie "Daten-Petersilie-validate =" Petersilie "sein" –

+0

Für Kompatibilität ich alw ays benutzen jquery 1.XX deshalb habe ich das geändert. :) – Apostolos

0

Das Problem war, heißt wurde mit data-required stattdessen ich data-parsley-required und auch anstelle von data-validate="parsley" verwenden sollte es data-parsley-validate="parsley"

Plunkr modifizierte