JQuery Validiert mehrere Felder mit einem Fehler

Lesezeit: 7 Minuten

Wie würde ich das JQuery Validate-Plugin verwenden, um eine Fehlermeldung für beispielsweise 3 Felder zu erhalten. Zum Beispiel 3 Doppelfelder. Standardmäßig erhalte ich 3 Fehlermeldungen, wenn alle 3 Felder leer bleiben. Ich möchte nur einen Fehler, der mit 3 Feldern verknüpft ist. Wenn irgendwelche leer sind, kommt der Fehler.

Ähnlich wie bei Chris

$("form").validate({
    rules: {
        DayOfBirth: { required: true },
        MonthOfBirth: { required: true },
        YearOfBirth: { required: true }
    },
    groups: {
        DateofBirth: "DayOfBirth MonthOfBirth YearOfBirth"
    },
   errorPlacement: function(error, element) {
       if (element.attr("name") == "DayOfBirth" || element.attr("name") == "MonthOfBirth" || element.attr("name") == "YearOfBirth") 
        error.insertAfter("#YearOfBirth");
       else 
        error.insertAfter(element);
   }
});

  • Wie schreibe ich mit mvc 3 diesen jquery.validaet-Adapter?

    – dfang

    14. Juni 2012 um 1:35 Uhr

  • @Jules, vielleicht kannst du mir helfen. Schau dir das an: stackoverflow.com/questions/47086843/…

    – Erfolgsmann

    3. November 2017 um 2:26 Uhr

JQuery Validiert mehrere Felder mit einem Fehler
Chris

Sie können die Gruppenoption verwenden, um Eingänge zu gruppieren. Wenn jeder der Eingänge eine Fehlermeldung hat, wird nur eine angezeigt.

Wahrscheinlich möchten Sie die mit den einzelnen Feldern verknüpften Meldungen überschreiben, damit sie sinnvoller sind. Beispielsweise erhalten Sie möglicherweise standardmäßig eine Fehlermeldung wie „Dieses Feld ist erforderlich“. Nun, das nützt dem Benutzer nicht viel, wenn es drei Eingänge gibt. Wahrscheinlich möchten Sie die Nachricht überschreiben, um zu sagen: “Die lokale Nummer ist erforderlich.” Für dieses Beispiel habe ich einfach alle Fehlermeldungen mit “Bitte geben Sie eine gültige Telefonnummer ein” überschrieben.

<input type="text" name="countryCode" />
<input type="text" name="areaCode" />
<input type="text" name="localNumber" />

groups: {
  phoneNumber: "countryCode areaCode localNumber"
},
rules: {
  'countryCode': {
    required: true,
    minlength:3,
    maxlength:3,
    number:true
  },
  'contactInformation[areaCode]': {
    required: true,
    minlength:3,
    maxlength:3,
    number:true
  },
  'contactInformation[localNumber]': {
    required: true,
    minlength:4,
    maxlength:4,
    number:true
  },
},
messages: {
  "countryCode": {
    required: "Please enter a valid Phone Number",
    minlength: "Please enter a valid Phone Number",
    maxlength: "Please enter a valid Phone Number",
    number: "Please enter a valid Phone Number"
  },
  "areaCode": {
    required: "Please enter a valid Phone Number",
    minlength: "Please enter a valid Phone Number",
    maxlength: "Please enter a valid Phone Number",
    number: "Please enter a valid Phone Number"
  },
  "localNumber": {
    required: "Please enter a valid Phone Number",
    minlength: "Please enter a valid Phone Number",
    maxlength: "Please enter a valid Phone Number",
    number: "Please enter a valid Phone Number"
  }
},

Dies ist für den HTML-Teil:

<div>
    <p class="myLabel left">Date of birth:</p>
    <p class="mandatory left">*</p>
    <div class="left">
        <p><input type="text" name="dobDay" class="required" /></p>
        <p><i>dd</i></p>
    </div>
    <div class="left">
        <p><input type="text" name="dobMonth" class="required" /></p>
        <p><i>mm</i></p>
    </div>
    <div class="left">
        <p><input type="text" name="dobYear" class="required" /></p>
        <p><i>yyyy</i></p>
    </div>
    <div class="clear"></div>
    <div class="myError">
        <label for="dateOfBirth" class="error">Please enter a valid date.</label>
    </div>
</div>

Dies ist das Skript, das ich verwendet habe:

$(document).ready(function() {

$("#myForm").validate({
    groups: {
      dateOfBirth: "dobDay dobMonth dobYear"
    },
    rules: {
      'dobDay': {
        required: true,
        minlength:1,
        maxlength:2,
        range: [1, 31],
        number:true
      },
      'dobMonth': {
        required: true,
        minlength:1,
        maxlength:2,
        range: [1, 12],
        number:true
      },
      'dobYear': {
        required: true,
        minlength:4,
        maxlength:4,
        number:true
      },
    },
});
});

Der gesamte HTML-Teil kann nach Belieben angepasst werden. Ich habe dieses komplexe Layout verwendet, weil ich dieses Feld zu einem bereits vorhandenen Formular hinzufügen musste. Aber es ist ein Beispiel, das funktioniert! Hoffe, es hilft jemandem!

Ich dachte, ich sollte das teilen. Der vollständige Code, der für mich funktioniert hat.

HTML

<div class="clearfix bl">
    <label>Fecha de nacimiento</label>
    <select name="fechanacimdia" id="fechanacimdia"></select>
    <select name="fechanacimmes" id="fechanacimmes"></select>
    <select name="fechanacimano" id="fechanacimano"></select>
</div>

JS

//hay que poblar selects de fecha
dia = $('#fechanacimdia');
mes = $('#fechanacimmes');
ano = $('#fechanacimano');
dia.append('<option>Día</option>');
for(i=1;i<=31;i++) {
    dia.append('<option value="'+i+'">'+i+'</option>');
}
meses = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"]
mes.append('<option>Mes</option>');
for(i=1;i<=12;i++) {
    mes.append('<option value="'+i+'">'+meses[i-1]+'</option>');
}
d = new Date();
year = d.getFullYear();
maxage = 100;
minage = 16;
ano.append('<option>Año</option>');
for(i=year-minage;i>=year-maxage;i--) {
    ano.append('<option value="'+i+'">'+i+'</option>');
}


//--------- validate ------------------------

$('#formulario').validate({
    rules: {
        fechanacimdia: { required: true },
        fechanacimmes: { required: true },
        fechanacimano: { required: true, validdate: true }
    },
    groups: {
        fechanacim: "fechanacimdia fechanacimmes fechanacimano"
    },
    messages: {
        fechanacimdia: "Fecha de nacimiento no es válida.",
        fechanacimmes: "Fecha de nacimiento no es válida.",
        fechanacimano: "Fecha de nacimiento no es válida."
    },
});
//funcion auxiliar para validar fecha de nacimiento correcta
jQuery.validator.addMethod("validdate", function(value, element) {
    var month = +$('#fechanacimmes').val() - 1; // Convert to numbers with "+" prefix
    var day = +$('#fechanacimdia').val();
    var year = +$('#fechanacimano').val();
    var date = new Date(year, month, day); // Use the proper constructor
    return date.getFullYear() == year && date.getMonth() == month && date.getDate() == day;
});

1645704068 349 JQuery Validiert mehrere Felder mit einem Fehler
matsondawson

Meine Meinung dazu war, sich zu ändern jQuery validator um irgendetwas mit dem zu validieren validateable Attribut darauf sowie die Standardeingaben. Sie können die bekommen 1.9.0 modifizierte Version des Plugins Hier

Grundsätzlich importieren Sie den neuen Jquery-Validator und gehen so vor:

<script>
$.validator.addMethod(
    "groupnotnull",
    function(value, element) {
        return $("input[type="text"]:filled",element).length!=0;
    },
    function(regexp, element) {
      return "At least one input must be specified";
    }
);
</script>

<div validateable="true" name="groupValidated" groupnotnull="true">
    <input type="text" name="foo"/>
    <input type="text" name="blah"/>
</div>

Die erforderlichen Modifikationen auf jQuery validator waren, es zu verwenden .attr('name') anstatt .name da .name funktioniert nur bei Formularfeldern. Und ändern Sie die Key-Up-Handler usw., um sie an Kinder von zu binden validateable Element.

Dies ist etwas dynamischer als Gruppen, da es ermöglicht, dass Felder in Bezug zueinander und nicht nur als einzelne Entitäten validiert werden.

  • Das Modifizieren des JQuery-Validatorkerns ist immer eine schlechte Idee, stattdessen sollten Sie ein neues Plugin erstellen, mit dem Sie das Produkt unabhängig aktualisieren können

    – kpull1

    17. Juni 2019 um 11:10 Uhr

1645704069 166 JQuery Validiert mehrere Felder mit einem Fehler
Süßigkeiten-BlingBling

Dieser Code zeigt einen häufigen Fehler an, wenn eines der erforderlichen Felder leer ist.

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
$(document).ready(function(){
  $("#myform").validate({
    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message="You missed " + errors + ' fields.';
        $("#messageBox").html(message);
        $("#messageBox").show();
      } else {
        $("#messageBox").hide();
      }
    },
    showErrors: function(errorMap, errorList) {

    },
    submitHandler: function() { alert("Submit!") }
 })
});  
</script>

</head>
<body>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<div id="messageBox"></div> 
<ul id="errorlist"></ul>
 <form id="myform" action="/loginurl" method="post"> 
   <label>DOB1</label> 
   <input name="dob1" class="required" /> 
   <label>DOB2</label> 
   <input name="dob2" class="required" /> 
   <label>DOB3</label> 
   <input name="dob3" class="required" />
   <br/>
   <input type="submit" value="Submit"/>
 </form>
</body>
</html>

  • Das Modifizieren des JQuery-Validatorkerns ist immer eine schlechte Idee, stattdessen sollten Sie ein neues Plugin erstellen, mit dem Sie das Produkt unabhängig aktualisieren können

    – kpull1

    17. Juni 2019 um 11:10 Uhr

1645704069 512 JQuery Validiert mehrere Felder mit einem Fehler
Jarret Meyer

Ein paar Optionen: Schauen Sie sich die an errorContainer. Sie können dafür sorgen, dass alle Fehler vollständig getrennt werden <div>. Oder Sie schauen sich die an invalid blockieren, und haben nur eine errorMessage.show() Befehl.

842900cookie-checkJQuery Validiert mehrere Felder mit einem Fehler

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy