jQuery Validierung nicht korrekt wahr

Question

Ich habe derzeit ein Formular, das ich mit dem jQuery Validator-Plugin validiere. Innerhalb des Formulars habe ich ein Feld, das je nach Eingabe ein anderes Feld benötigt oder nicht.

<select name="supportiveServices" id="supportiveServices" style="float: left; margin-left: 20px; width: 30%;"> 
     <option value="">Select One</option> 
     <option value="Accepted">Accepted</option> 
     <option value="Declined">Declined</option> 
    </select> 


<input name= "serviceStartDate" id= "serviceStartDate" type="date" style="width: 50%;"></input> 

jQuery

serviceStartDate: { 
      required: function(element) { 
       if($("#supportiveServices").val() == 'Accepted') { 
        return true; 
       } 
       else { 
        return false; 
       } 
      }, 

     }, 

Diese Abhängigkeit Anforderung scheint gut zu funktionieren, aber die Frage, die ich konsequent in leite ist ich, dass ich das Datum gültig und müssen. Ich habe eine Methode hinzugefügt, um sicherzustellen, dass Daten gültig sind.

jQuery.validator.addMethod("DateFormat", 
    function(value, element) { 
    return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 
}, 
    "Please enter a date in the format dd/mm/yyyy"; 
); 

Ich bin neu in diesem Plugin, aber ich habe die folgenden zwei Lösungen ausprobiert, von denen beide true zurück und erfordern Eingabe:

1. eine Funktion erstellen, die im Grunde true zurück, wenn das Datum leer ist und falsch, wenn nicht.

   serviceStartDate: { 
        required: function(element) { 
         if($("#supportiveServices").val() == 'Accepted') { 
          return true; 
         } 
         else { 
          return false; 
         } 
        }, 
   
        DateFormat: function(element) { 
         if($("#serviceStartDate").val() != 0 || $("#serviceStartDate").val() != null || $("#serviceStartDate").val() != undefined || $("#serviceStartDate").val() != '') { 
          return true; 
         } else { 
          return false; 
         } 
        } 
   
       }, 
   

2. Erstellen Sie eine separate Methode.

   jQuery.validator.addMethod("DateFormatSupport", 
        function(value, element) { 
        if ($("#serviceStartDate") == 0) { 
        return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/); 
        } 
       }, 
       "Please enter a date in the format dd/mm/yyyy"//removed ; 
       ); 
   

und es ruft.

 serviceStartDate: { 
      required: function(element) { 
       if($("#supportiveServices").val() == 'Accepted') { 
        return true; 
       } 
       else { 
        return false; 
       } 
      }, 

      DateFormatSupport: true 
      } 

     }, 

Ich brauche im Grunde den Validator, um sicherzustellen, wenn der Kunde nicht wählen „Akzeptiert“ für unterstützende Dienstleistungen, dann serviceStartDate optional sein kann. Wenn "Akzeptiert" für unterstützenden Service gewählt wurde, müssen sie serviceStartDate ausfüllen und das Datum muss ebenfalls gültig sein. Als Vorsichtsmaßnahme möchte ich, wenn sie irgendetwas in serviceStartDate ausgefüllt haben, ob es optional ist oder nicht, ein Datum sein - Dies geht zu einer Datenbank, so dass es entweder Null oder ein Datum sein muss.

Irgendwelche Ratschläge?

Answer 1

Ich möchte, wenn sie irgendetwas in serviceStartDate ausgefüllt haben, ob es optional ist oder nicht, ein Datum zu sein ... Irgendwelche Beratung?

Sie müssen lediglich die eingebaute in date Regel auf dem Datumsfeld zu erklären, während machen die required Regel abhängig von Ihrem select Element, wie Sie bereits getan haben. In dieser Situation ist keine benutzerdefinierte Regel erforderlich. Es ist auch nicht notwendig, die Regel date als Bedingung zu definieren, da alle Regeln automatisch ignoriert werden, wenn ein optionales Feld leer gelassen wird.

rules: { 
    supportiveServices: { 
     required: true 
    }, 
    serviceStartDate: { 
     required: function(element) { 
      return ($("#supportiveServices").val() == 'Accepted') ? true : false; 
     }, 
     date: true 
    } 
} 

Arbeiten DEMO: jsfiddle.net/y1Lytetm/

NOTES:

• I ternary shorthand für bedingte verwendet ... es ist eine Zeile Code sechs ersetzen.

• Es gibt nicht so etwas wie ein inputBehälter Element, so entfernte ich Ihre Schließung </input> Tag, der nicht als gültigen HTML existiert.