jQuery Validation wtyczkę niestandardowego umieszczenia błędu

Question

przy użyciu jQuery Validation plug-in do następującej postaci:

<form id="information" method="post" action="#"> 

      <fieldset> 
       <legend>Please enter your contact details</legend> 
       <span id="invalid-name"></span> 
       <div id="id"> 
        <label for="name">Name: (*)</label> 
        <input type="text" id="name" class="details" name="name" maxlength="50" /> 
       </div> 

       <span id="invalid-email"></span> 
       <div id="id"> 
        <label for="email">Email: (*)</label> 
        <input type="text" id="email" class="details" name="email" maxlength="50" /> 
       </div> 
      </fieldset> 
      <fieldset> 
       <legend>Write your question here (*)</legend> 
       <span id="invalid-text"></span> 
       <textarea id="text" name="text" rows="8" cols="8"></textarea> 


      <div id="submission"> 
       <input type="submit" id="submit" value="Send" name="send"/> 
      </div> 
      <p class="required">(*) Required</p> 
      </fieldset> 

      </form> 

Jak mogę umieścić wewnątrz znaczników błędów rozpiętości? (# invalid-name, # invalid-email, # invalid-text)

Przeczytałem dokumentację dotyczącą umieszczania błędów, ale nie wiedziałem, jak to działa. Czy można obsłużyć każdy pojedynczy błąd i umieścić go w określonym elemencie?

Dziękuję

Answer 1

Jest to podstawowa struktura, można użyć cokolwiek selektor chcesz w metodzie. Masz element błędu i element, który był nieprawidłowy.

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo(element.prev()); 
    } 
}); 

Albo kierować identyfikator, można zrobić

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo('#invalid-' + element.attr('id')); 
    } 
}); 

nie testowano, ale powinien działać.

Answer 2

Okazało się, że za pomocą .insertAfter zamiast .appendTo działa:

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.insertAfter('#invalid-' + element.attr('id')); 
    } 
}); 

Answer 3

Można również ręcznie dodać etykiety o błędach w miejscach, które ich potrzebują. W moim konkretnym przypadku miałem bardziej złożoną formę z listami checkbox itp., Gdzie wstawienie lub wstawienie po złamie układ. Zamiast tego, możesz skorzystać z tego, że skrypt sprawdzania poprawności oceni, czy istniejący tag etykiety istnieje dla określonego pola i używa go.

Rozważmy:

<div id="id"> 
    <label for="name">Name: (*)</label> 
    <input type="text" id="name" class="details" name="name" maxlength="50" /> 
</div> 

Teraz dodać następujący wiersz:

<label for="name" class="error" generated="true"></label>

który jest standardem etykieta błąd:

<div id="id"> 
    <label for="name">Name: (*)</label> 
    <input type="text" id="name" class="details" name="name" maxlength="50" /> 
</div> 
<div id="id-error"> 
    <label for="name" class="error" generated="true"></label> 
<div> 

jQuery użyje tej etykiety zamiast generowania nowej. Niestety nie mogłem znaleźć żadnej oficjalnej dokumentacji na ten temat, ale znalazłem inne posty, które napotkały to zachowanie.

Answer 4

Używam rozszerzenie metadanych z walidatora .. (uwaga, jestem ustawienie go użyć atrybutu danych-meta na znacznikach ...)

<input ... data=meta='{ 
    errorLabel: "#someotherid" 
    ,validate: { 
     name:true 
    } 
}' >

następnie w kodzie .. .

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo($(
      $(element).metadata().errorLabel 
     )); 
    } 
});

używam metadane dla wielu podobnej funkcjonalności, która działa dość ładnie ... uwaga, użyłem pojedynczych kleszczy (apostrof) wokół metadanych, w ten sposób można użyć JSON serializer po stronie serwera, aby wstrzyknąć do tej części tagu (która powinna używać podwójnych cudzysłowów wokół ciągów znaków) ... eral apos może być problemem, (zamień "" "na" \ x27 "w ciągu znaków).