Die Validierung von Mehreren Textbox-Date mit jQuery Validierung

Ich versuche zu schreiben, eine angepasste Methode für die überprüfung eines Datums. Das Datum jedoch existiert in drei text-Boxen. Darüber hinaus kann es mehrere Instanzen dieses Datum.

    <div class="customDate"> 
        <input class="month" id="dob_Month" maxlength="2" name="dob.Month" type="text"  /> 
        /
        <input class="day" id="dob_Day" maxlength="2" name="dob.Day" type="text" /> 
        /
        <input class="year" id="dob_Year" maxlength="4" name="dob.Year" type="text"  /> 
    </div>

Auf submit, möchte ich überprüfen, div, das das customDate Klasse. I. e. stellen Sie sicher, dass alle Felder ausgefüllt wurden, stellen Sie sicher, Bereiche korrekt sind, etc. Ich bin mit dem folgenden code:

$.validator.addMethod("customDate", function(element) { return false;}, "error message");

Validierung Funktion nicht brennen jedoch. Was bin ich? Auch gibt es einen besseren Weg, dies zu tun.

Hinweis: ich habe Stub mit den Funktionen für die eigentliche Validierungslogik. Ich muss nur wissen, wie man die validation-Methode ausgelöst.

InformationsquelleAutor ckarbass | 2009-11-12

  1. 2

    Ich würde versuchen, die Auslösung eines Ereignisses auf Formular Absenden, bevor die Validierung, die fügt die Werte aus den einzelnen Tag/Monat/Jahr-Eingänge zusammen in einem separaten versteckten Eingang, und bestätigen Sie anschließend den verborgenen Eingang statt.

    interessante Idee...

    InformationsquelleAutor Rudism

  2. 8

    Ich es geschafft haben, erstellen Sie mehrere Feld-Validierung ohne die Verwendung eines hidden-Feld, indem Sie die Anleitung auf
    http://docs.jquery.com/Plugins/Validation/multiplefields und änderung entsprechend

    • wäre des guten zuviel, obwohl 🙂

    html-code

    <div class="whatever">

    <!-- dob html -->
    <div id="dobdate">
    <select name="dobday" class="dateRequired" id="dobday">
             <option value="">Day</option>
         <option value="1">1</option>
    </select>

    <select name="dobmonth" class="dateRequired" id="dobmonth">
         <option value="">Month</option>
         <option value="January">January</option>
    </select>

    <select name="dobyear" class="dateRequired" id="dobyear">
             <option value="">Year</option>
         <option value="2010">2010</option>
    </select>
    <div class="errorContainer">&nbsp;</div>
    </div>

    <br />

    <div id="joinedate">
    <!-- date joined html -->
    <select name="joinedday" class="dateRequired" id="joinedday">
           <option value="">Day</option>
           <option value="1">1</option>
    </select>

    <select name="joinedmonth" class="dateRequired" id="joinedmonth">
         <option value="">Month</option>
         <option value="January">January</option>
    </select>

    <select name="joinedyear" class="dateRequired" id="joinedyear">
            <option value="">Year</option>
        <option value="2010">2010</option>
    </select>
    <div class="errorContainer">&nbsp;</div>
    </div>
        <br />
    <input name="submit" type="submit" value="Submit" class="submit" title="Submit"/>
</div>

    jquery-code

     //1. add a custom validation method

 $.validator.addMethod("CheckDates", function(i,element) 
 {
      //function with date logic to return whether this is actually a valid date - you'll need to create this to return a true/false result
      return IsValidDate(element);

 }, "Please enter a correct date");

 //2. add a class rule to assign the validation method to the relevent fields - this sets the fields with class name of "dateRequired" to be required and use the method youve set up above

 $.validator.addClassRules({
     dateRequired: { required:true, CheckDates:true}
 });

//3. add a validation group (consists of the fields you want to validate)

$("#myForm").validate(
{
    submitHandler: function() 
    {
         alert("submitted!");
    },
    groups: 
    {
                dob: "dobyear dobmonth dobday", joined : "joinedyear joinedmonth joinedday"
    },
    messages: { dob : " ", joined : " " //sets the invidual errors to nothing so that only one message is displayed for each drop down group 
    },
    errorPlacement: function(error, element) 
    {
       element.parent().children(".errorContainer").append(error);
    }
});

    JavaScript-code

    function IsValidDate(_element)
{
    //just a hack function to take an element, get the drop down fields within it with a particular class name ending with day /month/year and perform a basic date time test
    var $dateFields =  $("#" + _element.id).parent();

    day = $dateFields.children(".dateRequired:[name$='day']");
    month = $dateFields.children(".dateRequired:[name$='month']");
    year = $dateFields.children(".dateRequired:[name$='year']");

    var $newDate = month.val() + " " + day.val() + " " + year.val();

    var scratch = new Date($newDate );

    if (scratch.toString() == "NaN" || scratch.toString() == "Invalid Date") 
    {
        return false;
    } else {
        return true;
    }
}

    InformationsquelleAutor james goldswain

  3. 2

    Fügen Sie ein verstecktes Feld

    <input id="month" maxlength="2" name="month" type="text"  /> 
<input id="day" maxlength="2" name="day" type="text" /> 
<input id="year" maxlength="4" name="year" type="text"  /> 

<input id="birthday"  name="birthday" type="text"  />

    dann verketten Sie die Werte in den versteckten, und überprüfen Sie das Feld.

    $('#day,#month,#year').change(function() {  
  $('#birthday').val($('#day').val()+'/'+ $('#month').val()+'/'+ $('#year').val());
});

    bestätigen Sie anschließend den verborgenen Wert.

    Das ist wirklich nützlich, ich habe eine minlength auf das versteckte Feld, um sicherzustellen, dass alle Elemente ausgewählt worden waren.
    Sie müssen möglicherweise auslösen keyup-Ereignis auf, dass hidden-Feld, damit alles gut funktionieren. die Validierung ist nicht ausgelöst, wenn Sie gerade tun, val(...) auf einer hidden-Feld für einige Grund.. so würde es zu ändern :$('#Geburtstag').val($('#Tag').val()+'/'+ $('#Monat').val()+'/'+ $('#Jahr').val()).trigger('keyup');

    InformationsquelleAutor ahvargas

  4. 1

    Ich bin mir ziemlich sicher, dass die Validierung plugin unterstützt nur die Eingaben überprüfen, nicht beliebige DOM-Elemente. Die Elemente-Funktion filtert alles, das nicht ein element sowie submit, reset, image-buttons und Behindertengerechte Eingänge.

    Was Sie wollen, zu tun ist, haben die Prüfungen für Monat, Tag und Jahr. Monat und Tag brauchen würde, um sich gegenseitig referenzieren, die Werte um die korrekte Validierung Logik.

    es ist trotzdem ein roll-up der Fehler...so, dass ich nicht über den Monat benötigt, Tag, Jahr erforderlich ist. Ich denke ich tun konnte: wenn Monat nicht gültig ist, überspringen Sie die Validierung für Tag und Jahr?

    InformationsquelleAutor tvanfosson

Schreibe einen Kommentar