javascript - Vad är jQuery Obtrusiv Validering?

Jag vet vad jQuery Validation-plugin är. Jag vet att jQuery Unobtrusive Validation-biblioteket gjordes av Microsoft och ingår i ASP.NET MVC-ramverket. Men jag kan inte hitta en enda onlinekälla som förklarar vad det är. Vad är skillnaden mellan det vanliga jQuery Validation-biblioteket och den "obtrusiva" versionen?

Svar #1

Brad Wilson har ett par utmärkta artiklar om diskret validering och diskret AJAX.
Det visas också mycket bra i denna Pluralsight-video i avsnittet om "AJAX och JavaScript".

I princip är det helt enkelt Javascript-validering som inte förorenar din källkod med sin egen validerings kod. Detta görs genom att använda data- attribut i HTML.

Svar #2

På ett obemärkt sätt:

  • Du behöver inte kalla på validate()-metoden.
  • Du specificerar krav med hjälp av dataattribut (data-val, data-val-required, etc.)

Jquery Validerings Exempel:

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

Exempel på Jquery Validate Unobtrusive:

<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>

Svar #3

För förtydligande, här är ett mer detaljerat exempel som visar formulärvalidering med jQuery Validation Unobtrusive.

Båda använder följande JavaScript med jQuery:

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

De främsta skillnaderna mellan de två tilläggen är de attribut som används för varje metod.

jQuery-validering

Använd helt enkelt följande attribut:

  • Ange erforderligt om det krävs
  • Ange typ för korrekt formatering (e-post etc.)
  • Ställ in andra attribut såsom storlek (min längd, etc.)

Här är formuläret...

<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-validering diskret

Följande dataattribut behövs:

  • data-msg-required="Detta är obligatoriskt."
  • data-rule-required="true/false"

Här är formuläret...

<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>

Baserat på något av dessa exempel, om de obligatoriska formulärfälten har fyllts i och de uppfyller de ytterligare attributkriterierna, kommer ett meddelande att dyka upp som informerar om att alla formulärfält har validerats. Annars kommer det att finnas text nära de felaktiga formulärfälten som visar felet.

Referenser: - jQuery Validering: https://jqueryvalidation.org/documentation/

Relaterade artiklar