Erforderlich = Eingabefeld "erforderlich" bedingt durch ein anderes Eingabefeld

Question

Ich habe eine von 2 Eingabefelder: Handy und Telefon. Ich möchte, dass mindestens eines dieser Felder benötigt wird, damit das Formular eingereicht werden kann. Entweder geben Sie die Handynummer ein und die Telefoneingabe wird nicht mehr benötigt oder umgekehrt.

<input class="form-control telephone" type="text" placeholder="Telephone" required="required" maxlength="100" pattern="^\+?[0-9 /-]*$"/> 

<input class="form-control cellphone" type="text" placeholder="Cellphone" required="required" maxlength="100" pattern="^\+?[0-9 /-]*$"/> 

fand ich, dass der JQuery-Validator bedingte Anweisungen hat, aber ich weiß nicht, wie sie zu benutzen oder sie didnt in meinem Code arbeiten. Heres, was ich hatte

$("#myForm").validate({ 
firstInput: { 
    required: function(element){ 
     return $(".cellphone").val().length > 0; 
    } 
}, 
secondInput: { 
    required: function(element){ 
     return $(".telephone").val().length > 0; 
    } 
} 
}); 

Answer 1

1) Sie müssen die Validierungsregeln in das Objekt Regeln einfügen.

2) Ihre if-Anweisungen sind falsch. Eingabe ist erforderlich (required: true), wenn der andere Eingang leer ist (otherInput.val().length == 0).

3) Sie müssen Ihren Eingaben Namensattribute geben.

$("#myForm").validate({ 
 
    rules: { 
 
    firstInput: { 
 
     required: function(element){ 
 
      return $(".cellphone").val().length == 0; 
 
     } 
 
    }, 
 
    secondInput: { 
 
     required: function(element){ 
 
      return $(".telephone").val().length == 0; 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script> 
 
<form id='myForm'> 
 
    <input class="form-control telephone" type="text" placeholder="Telephone" maxlength="100" name="firstInput" pattern="^\+?[0-9 /-]*$"/> 
 
    <input class="form-control cellphone" type="text" placeholder="Cellphone" name="secondInput" maxlength="100" pattern="^\+?[0-9 /-]*$"/> 
 
    <input type="submit"> 
 
</form>