JQuery Validierung: Ändern der error-Klasse, einer anderen Klasse ersetzen

Was ich will zu tun ist für die Fehler die andere Klasse in meinem html-und wechseln zu einer anderen Klasse für das styling.

z.B. in meinem HTML habe ich

<div id="firstname" class="cfield">
    <span>First Name:</span>
    <label><input id="first" name="first" type="text">*</label>
    <span id="firstDesc" class="desc">Only characters</span>
</div>

Möchte ich die Fehlermeldung " an die Stelle der Klasse desc, und ändern Sie dann in der Klasse error so kann der Stil änderung (rote Schrift). Ist das möglich?

In meinem JQuery habe ich:

function checkForm() {
$('#contactform').validate( { 
    errorElement: 'span',
    errorClass: 'desc',
    rules: { 
        first: {
            required: true,
            minLength: true,
        }
    },
    messages: {
        first: {
            required: "You must enter a first name",
            minLength: "Your first name must have more than 2 characters",
        }
    }
} );
}
InformationsquelleAutor cfleming93 | 2015-03-26
  1. 2

    Ursprünglichen code hatte ein paar Probleme.

    1. Du falsch die minlength Regel als minLength.

    2. Würden Sie nicht gesetzt minlength zu true. Es wird auf einen parameter festgelegt, der die Anzahl der Zeichen. minlength: [2]

    3. Die benutzerdefinierte Meldung wird ein Platzhalter, {0} repräsentiert, und wird automatisch ersetzt durch die parameter, die Sie für die Regel. minlength: "Your first name must have more than {0} characters"

    4. Würden Sie auch nicht die .validate() Methode innerhalb einer Funktion. Die .validate() Methode ist nur für initialisieren Sie das plugin auf Ihrem Formular, so dass es nur aufgerufen wird einmal am DOM bereit.

    5. Wenn Sie versuchen, ändern Sie Ihre hard-codiert span in der Fehlermeldung, dann brauchen Sie nicht zu ändern errorClass. Sie können ihn verlassen, als error. Verwenden Sie einfach die errorPlacement Funktion zu ändern, den Inhalt Ihrer hard-codiert span in der Fehlermeldung. Mit jQuery-DOM-traversal-Techniken, die hart codierte span ist das nächste element nach dem übergeordneten element der Eingabe.

      errorPlacement: function(error, element) {
    $(element).parent().next('span').html(error);
}

    DEMO: http://jsfiddle.net/48c593kd/

    $(document).ready(function () {

    $('#contactform').validate({
        errorElement: 'span',
        rules: {
            first: {
                required: true,
                minlength: [2],
            }
        },
        messages: {
            first: {
                required: "You must enter a first name",
                minlength: "Your first name must have more than {0} characters",
            }
        },
        errorPlacement: function(error, element) {
            $(element).parent().next('span').html(error);
        }
    });

});
    • Ok, danke, es funktioniert jetzt!
    InformationsquelleAutor Sparky
  2. 1

    Können Sie unter über diese Art der Validierung css ändern

    JS:

    $(document).ready(function(){
    $("#registerForm").validate({
    errorElement: 'span',
    errorClass: 'desc',
    rules: { 
        name: {
            required: true,
            minlength : 2
        }
    },
    messages: {
        name: {
            required: "You must enter a name",
            minlength: "Your first name must have more than 2 characters",
        }
    }
  });
});

    CSS:

    span.desc {
    color: red;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id='registerForm' name='registerForm' method='post' action='' >   
 <label for="field">Name: </label>
 <input type='text' name='name' id='name' />
    <br/>
 <input type='submit' name='Submit' value='Submit' />

</form>

    • Ja, aber die desc - Klasse wird verwendet, bevor Sie wie ein Hauch, und ich will nur, es zu ändern, wenn es ein Fehler ist
    • Ich bin nicht das bekommen, was Sie wollen
    • Es muss an die Stelle der desc Klasse, und wenn es ist ein Fehler in Roter Schrift
    InformationsquelleAutor 111
Schreibe einen Kommentar