Co to jest dyskretna walidacja jQuery?

Wiem, czym jest wtyczka jQuery Validation. Wiem, że biblioteka jQuery Unobtrusive Validation została stworzona przez firmę Microsoft i jest zawarta w strukturze ASP.NET MVC. Ale nie mogę znaleźć ani jednego źródła online, które wyjaśniałoby, co to jest. Jaka jest różnica między standardową biblioteką walidacji jQuery a wersją „dyskretną”?

Brad Wilson ma kilka świetnych artykułów na temat dyskretnego sprawdzania poprawności i dyskretnego Ajaxa .
Jest to również bardzo ładnie pokazane w tym filmie Pluralsight w sekcji „AJAX i JavaScript”.

Zasadniczo, jest to po prostu walidacji JavaScript że nie zanieczyszcza swój kod źródłowy z własnym walidacji kodu. Odbywa się to poprzez wykorzystanie data-atrybutów w HTML.

Dyskretnie:

• Nie musisz wywoływać metody validate ().
• Określasz wymagania za pomocą atrybutów danych (data-val, data-val-required itp.)

Przykład walidacji jquery :

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery Validate Unobtrusive Przykład :

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

Dla wyjaśnienia, oto bardziej szczegółowy przykład demonstrujący walidację formularza przy użyciu jQuery Validation Unobtrusive.

Oba używają następującego JavaScript z jQuery:

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

Główne różnice między tymi dwoma wtyczkami to atrybuty używane w każdym podejściu.

Walidacja jQuery

Po prostu użyj następujących atrybutów:

• Ustaw wymagany w razie potrzeby
• Ustaw typ dla prawidłowego formatowania (e-mail itp.)
• Ustaw inne atrybuty, takie jak rozmiar (minimalna długość itp.)

Oto formularz ...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

jQuery Validation Unobtrusive

Potrzebne są następujące atrybuty danych:

• data-msg-required = "To jest wymagane."
• data-rule-required = "prawda / fałsz"

Oto formularz ...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

Na podstawie jednego z tych przykładów, jeśli wymagane pola formularza zostały wypełnione i spełniają dodatkowe kryteria atrybutów, pojawi się komunikat informujący, że wszystkie pola formularza zostały sprawdzone. W przeciwnym razie w pobliżu obraźliwych pól formularza pojawi się tekst wskazujący na błąd.

Referencje: - jQuery Validation: https://jqueryvalidation.org/documentation/

jQuery Validation Unobtrusive Native to kolekcja rozszerzeń pomocniczych HTML ASP.Net MVC. Wykorzystują one natywną obsługę walidacji jQuery dla walidacji opartej na atrybutach danych HTML 5. Microsoft dostarczył jquery.validate.unobtrusive.js z powrotem z MVC 3. Zapewnił sposób na zastosowanie walidacji modelu danych po stronie klienta przy użyciu kombinacji atrybutów jQuery Validation i HTML 5 (to jest „dyskretna” część).