jQuery Validate errorLabelContainer

Bitte helfen Sie mir mit meiner Validierung, ich habe versucht, anzupassen, wo die Fehlermeldung angezeigt werden sollte, aber ich kann nicht und ich habe versucht, das Web zu suchen, aber es scheint, ich verstehe nicht "ErrorLabelContainer" oder validate.jsjQuery Validate errorLabelContainer

Ich habe zwei Eingänge, Name und E-Mail. Ich möchte kontrollieren, wo die Meldung anzeigt, statt unter dem Input-Tag

<script> 
 
jQuery(function($) { 
 
$('#form').validate({ 
 
\t errorClass: "errorOne", 
 
\t rules: { 
 
\t \t firstname: { 
 
\t \t \t required: true 
 
\t \t }, 
 
\t \t email: { 
 
\t \t \t required: true 
 
\t \t } 
 
\t }, 
 
\t messages: { 
 
\t \t firstname: { 
 
\t \t \t required: 'Please enter name', 
 
\t \t \t errorElement : 'div', 
 
\t \t \t errorLabelContainer: 'errorOne' 
 
\t \t }, 
 
\t \t email: { 
 
\t \t \t required: 'Please enter a valid email address', 
 
\t \t \t errorElement : 'div', 
 
\t \t \t errorLabelContainer: '.errorTwo' 
 
\t \t } 
 
\t } 
 
}); 
 
</script>

<style> 
 
\t .errorOne{ 
 
\t \t background: lightgreen; 
 
\t \t min-height: 20px; 
 
} 
 
\t .errorTwo{ 
 
\t \t background: pink; 
 
\t \t min-height: 20px; 
 
} 
 
\t </style>

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <title>jQuery validation plug-in - main demo</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 
</head> 
 
<body> 
 

 

 
<form id="form" method="post" action=""> 
 
\t <div style="border:1px solid red; height: 500px"> 
 
\t \t <div class="col-md-8"> 
 
\t \t \t <label for="firstname">Enter Name:</label> 
 
\t \t \t <input class="form-control" type="text" name="firstname" /> 
 
\t \t \t <label for="email">Enter Email:</label> 
 
\t \t \t <input class="form-control" type="text" name="email" /><br> 
 
\t \t \t <input type="submit" class="button" value="Submit" /> 
 
\t \t </div> 
 
\t \t <div class="col-md-4"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <p>The name error must be displayed in the div with class errorOne</p> 
 
\t \t \t \t \t <div class="errorOne"></div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <p>The email error must be displayed in the div with class errorTwo</p> 
 
\t \t \t \t \t <div class="errorTwo"></div> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 

 
</form> 
 
</body> 
 
</html>

Quelle

2017-05-10 Thando Hlophe

Sie errorClass Option können die Fehlerklasse ändern, wie folgt aus:

$('#form').validate({ 
    errorClass: "errorOne", // Now class of '.errorOne' will be used for errors 
    rules: { 
     firstname: { 
     required: true 
     }, 
     email: { 
     required: true 
     } 
    }, 
    messages: { 
     firstname: { 
      errorElement : 'div', 
     }, 
     email: { 
      errorElement : 'div', 
     } 
    }, 

    }); 
});

Beachten Sie, dass es ist errorOne ohne einen Punkt davor.

UPDATE

Wenn Sie möchten jeden Eingang unterschiedliche Fehlerklassen hinzuzufügen, ist es nicht möglich, dies zu tun, ohne jQuery Validator zwicken.

Eine einfachere Möglichkeit, dies zu erreichen, wäre eine CSS-Klasse nur für diesen Eingang errorElement (label standardmäßig) zu definieren.

So:

input[name='firstname']+label{ color: deeppink; } 

input[name='email']+label{ color:pink; }

Werfen Sie einen Blick auf diese Demo

Quelle

2017-05-10 07:20:13 user3284463

Hallo und vielen Dank für die schnelle Antwort. –

Hallo, kann ich dich bitten, sich meine Frage noch einmal anzusehen. Grundsätzlich habe ich zwei Spalten, eine Spalte hat das Formular und die andere Spalte hat zwei divs, um benutzerdefinierte Fehlermeldung anzuzeigen. –

@ThandoHlophe Meine Antwort aktualisiert :) – user3284463

jQuery Validate errorLabelContainer

Antwort

Verwandte Themen