Validierung von HTML-Formular mit JQuery

Kann jemand sehen, wohin ich gehe falsch mit dieser form der Validierung? Ich war mit ein Beispiel habe ich online gefunden und es funktioniert bei mir nicht.

Möchte ich überprüfte die input-Feldern mit jquery, bevor diese an die server-Seite Skript. Es soll drucken Fehlermeldung neben dem Feld, wo der Benutzer ist, fehlt eine Eingabe.

Hier der code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="forms.css" />

 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $("#registerform").validate({
        rules: {
          username: "required",
          firstname: "required", 
          email: {//compound rule
          required: true,
          passwd: true,
          email: true,
        },
        username:{
            username: true
        },  
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>

<style type="text/css">

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 </head>

<body>

Please register below
<p />
                <form action=" " id="registerform" method="POST">


        <table cellspacing="9">
         <tr><td><b>Username:</b></td><td><input type="text" name="username" size="30"></td></tr>
         <tr><td><b>First name:</b></td><td><input type="text" name="firstname" size="30"/></td></tr>
         <tr><td><b>Surname:</b>   </td><td><input type="text" name="lastname" size="30"/></td></tr>
         <tr><td><b>Email  : </b>  </td><td><input type="text" name="email" size="30"/></td></td></tr>
         <tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr>

         <tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr>
         <tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr>
         <tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr>
         <tr><td><b>Town/City:</b></td><td><input type="text" name="town" size="30"/></td></tr>
         <tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr>

     </table>

     <p />
                 <input class="submit" type="submit" value="Sign Up!" />
                <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
                </form>


</body>

Hier ist der code der original-code, den ich habe von einem website irgendwo und es funktioniert. Aber ich kann nicht scheinen, um das Beispiel in meinem code.

<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $("#form2").validate({
        rules: {
          name: "required",//simple rule, converted to {required:true}
          email: {//compound rule
          required: true,
          email: true
        },
        url: {
          url: true
        },
        comment: {
          required: true
        }
        },
        messages: {
          comment: "Please enter a comment."
        }
      });
    });
  </script>

  </head>


  <body>
    <form id="form2" method="post" action=""><br />
      Name * <input type="text" name="name" /> <br />
      E-Mail *<input type="text" name="email" /> <br />

      URL <input type="text" name="url" /> <br />
      Your comment * <textarea name="comment" ></textarea> <br />
      <input class="submit" type="submit" value="Submit"> 
    </form>
  </body>
</html>

Update: Dank @Usman es arbeitet jetzt. Doch noch eine Frage, ist es möglich, ändern Sie die Standard-Fehlermeldung anstelle der 'Dieses Feld ist erforderlich' ?

Dank

Es wäre viel einfacher für andere, um Ihnen zu helfen, wenn Sie erklären, wie es funktioniert nicht für Sie.
Sorry, es ist nicht validieren. Es ist einfach sendet leere form.
u got error oder ......?
Wiederholen, was @Shawn Kinn, sagte aber, sicher sein, zu überprüfen, ob alle Javascript-Fehler pop-up (standard-Funktion in FF und Chrome).

InformationsquelleAutor Julie | 2011-08-22

html jquery

Entfernen Sie nicht vorhandenen Felder aus Gültigkeitsregel, url usw. Ich habe entfernt diese und Ihre Arbeitsweise. Arbeiten http://jsfiddle.net/xyRRU/ , überprüfen Sie den code unten:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Register</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="forms.css" />

 <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
      $("#registerform").validate({
        messages: {

            firstname: "Please enter your firstname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },

            email: "Please enter a valid email address"

        },
        rules: {
          username: "required",
          firstname: "required", 
          email: {//compound rule
          required: true,
          passwd: true,
          email: true,
        },
        },

      });
    });
  </script>

<style type="text/css">

label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 </head>

<body>

Please register below
<p />
                <form action=" " id="registerform" method="POST">


        <table cellspacing="9">
         <tr><td><b>Username:</b></td><td><input type="text" name="username"  size="30"></td></tr>
         <tr><td><b>First name:</b></td><td><input type="text" name="firstname"  size="30"/></td></tr>
         <tr><td><b>Surname:</b>   </td><td><input type="text" name="lastname" size="30"/></td></tr>
         <tr><td><b>Email  : </b>  </td><td><input type="text" name="email" size="30"/></td></td></tr>
         <tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr>

         <tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr>
         <tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr>
         <tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr>
         <tr><td><b>Town/City:</b></td><td><input type="text" name="town" size="30"/></td></tr>
         <tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr>

     </table>

     <p />
                 <input class="submit" type="submit" value="Sign Up!" />
                <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
                </form>


</body>

Tausend Dank, das funktionierte wie ein Zauber. Du bist ein star 🙂
Gibt es eine Möglichkeit zu geben eigene Fehlermeldung anstelle der Standard - "Dieses Feld ist erforderlich"?
Ich habe bearbeitet die Antwort zeigt, wie fügen Sie Ihre eigenen Nachrichten, danke.

InformationsquelleAutor Usman

Überprüfen Sie Ihre syntax -, Sie haben ein Komma Links hier:

    rules: { 

      username: "required", 

      firstname: "required",  

      email: {//compound rule 

      required: true, 

      passwd: true, 

      email: true**,** 

    },

Entfernen, und sehen, wie Sie zu erhalten.

InformationsquelleAutor lowe_22

0

Du bist immer JavaScript-Fehler. Führen Sie diese Geige zu sehen, http://jsfiddle.net/nickyt/Sjvh2 . Es sieht aus wie die validation-plug-in werfen Fehler auf Zeile 493. Starten Sie das Debuggen 😉

InformationsquelleAutor nickytonline
0

Ihre Verbindung zu jquery.validate.js ist wieder ein 403 Forbidden-Fehler, was bedeutet, du bist nicht wirklich importieren Sie das plugin.

Versuchen Sie diesen link statt: http://view.jquery.com/trunk/plugins/validate/jquery.validate.js
```
<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script>
```
Besser noch, zeigen Sie auf eine lokale Kopie der Datei.

Auch nicht überprüfen, dass man nicht immer irgendwelche JS Fehler mit firebug.

Bearbeiten : Diese änderung alleine nicht lösen Ihr problem, aber Sie sollten wirklich nicht sein hotlinking das Skript aus dev.jquery.com. Sehen Verwandte Antwort, und Hotlinking deaktiviert werden, auf Januar 31, 2011.

Hmm, das scheint nicht zu helfen 🙁 trotzdem Danke.
Dies allein wird nicht Ihr problem lösen, da Sie hatte Fehler in JS. Allerdings sollte man das wirklich ändern Sie Ihren link da dev.jquery.com nicht erlaubt hotlinking. Du bist besser dran hosting Ihrer eigenen.

InformationsquelleAutor Shawn Chin

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.