Validação jQuery – Dois campos, necessários apenas para preencher um

Eu estou usando o plugin de validação jQuery no meu formulário. No meu formulário eu tenho um campo ‘Telefone’ e um ‘Celular No.’. campo.

Como eu faria para que o usuário preenchesse um deles, mas pode ser um campo?

Isso parece com o que você precisa para usar o callback de dependência

O que isso permitirá que você faça é:

Torna o elemento obrigatório, dependendo do resultado do retorno de chamada fornecido.

Em seguida, você pode colocar uma regra de validação required nos dois campos de telefone que serão necessários apenas com base no retorno do retorno de chamada de function; Assim, você pode colocar uma regra no campo telefônico para declarar exigir essa regra somente se o campo móvel estiver em branco e vice-versa para o campo móvel.

Isso não foi testado, mas em teoria

 rules: { telephone: { required: function(element) { return $("#mobile").is(':empty'); } }, mobile: { required: function(element) { return $("#telephone").is(':empty'); } } } 

Certifique-se de verificar os comentários / outras respostas para possíveis respostas atualizadas.

Eu acho que a maneira correta de fazer isso é usando o método “require_from_group”.

Você pode verificar em http://jqueryvalidation.org/require_from_group-method/

O exemplo é exatamente o que você está procurando:

     

É obrigatório include additional-methods.js

Veio aqui procurando as mesmas respostas. Achei o post acima muito útil. Obrigado.

Eu estendi esta solução para verificar se o outro campo é de fato válido, em vez de apenas “não vazio”. Isso garante que o usuário insira um número de telefone válido antes de remover a class “obrigatória” do campo Celular e vice-versa.

 Mobile: { required: function(element) { return (!$("#Phone").hasClass('valid')); } }, Phone: { required: function(element) { return (!$("#Mobile").hasClass('valid')); } } 

Requisito é Validação precisa ser C ou (A e B) é necessário. A coisa que funcionou para mim é:

 $.validator.addMethod("multipeFieldValidator", function(value) { var returnVal = false; if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) { returnVal = true; } return returnVal; }, 'Either C or A and B is required'); $('#Afield.form-control').change(function(){ $(this).valid(); $("#Bfield").valid(); $("#Cfield").valid(); }); $('#Bfield.form-control').change(function(){ $(this).valid(); $("#Afield").valid(); $("#Cfield").valid(); }); $('#Cfield.form-control').change(function(){ $(this).valid(); $("#Bfield").valid(); $("#Afield").valid(); }); within rules I have Afield: "multipeFieldValidator", Bfield: "multipeFieldValidator", Cfield: "multipeFieldValidator" 

Eu tive problemas é .is(':empty') então aqui está o meu exemplo de opções de trabalho.

Antes:

 rules: { name: {required: true}, email: {required: true}, phone: {required: true} } 

Todos os campos foram obrigatórios. Mas eu queria e-mail e / ou telefone para criar o ‘ou’:

 rules: { name: {required: true}, email: {required: function() { //returns true if phone is empty return !$("#phone").val(); } }, phone: {required: function() { //returns true if email is empty return !$("#email").val(); } } }, messages: { email: "Email is required if no phone number is given.", phone: "A phone number is required if no phone email is given." } 

E você verá que eu adicionei a opção de messages para dar ao usuário algumas informações significativas, porque as mensagens padrão diriam que cada campo é necessário, o que não é verdade nessa situação.

 $(document).ready(function () { jQuery.validator.addMethod("mobile10d", function (value, element) { return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value); }, "Please enter a valid 10 digit phone number."); $("#form_id").validate({ rules: { mobile: { required: "#telephone:blank", mobile10d: true }, telephone: { required: "#mobile:blank", mobile10d: true } } }); }); 
   

Isso vai fazer

 Mobile: { required: function(element) { return (jQuery.isEmptyObject($("#Phone").val())); } }, Phone: { required: function(element) { return (jQuery.isEmptyObject($("#Mobile").val())); } }